Animated side menu - Kodhus

Animated side menu

Like & share to be notified of the new tips & tutorials:

Animated side menu

In this tutorial we are going to create a side navigation menu that opens and closes smoothly using css transitions.
Take a look at the demo and download the source to see what it looks like.
To open and close the menu we use jQuery javascript plugin.
This user experience has recently been quite used in websites that won the best site of the day awards and we want to make one in this article.

Markup and Styling

Most import parts of markup are the navigation trigger button on the right hand side which opens and closes the menu and also the navigation itself.

Lets start with the trigger button.

<div class="nav-btn">
    <span></span>
</div>

The markup is so little and now the styles. You can see that we used pseudo-elements and also transition and transforms to achieve the effect.


.nav-btn {
    width: 26px;
    height: 30px;
    position: fixed;
    display: block;
    cursor: pointer;
    right: 20px;
    z-index: 999999;
    margin-top: 10px;
}
.nav-btn span, .nav-btn span:before, .nav-btn span:after {
    position: absolute;
    height: 2px;
    width: 26px;
    background-color: #fff;
    transition: all 0.2s;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
.nav-btn span {
    top: 50%;
}
.nav-btn span:before {
    content: '';
    top: -6px;
}
.nav-btn span:after {
    content: '';
    top: 6px;
}
.nav-btn.open span, .nav-btn.open span:before, .nav-btn.open span:after {
    background-color: #fff;
}
.nav-btn.open span {
    transform: translateX(-5px);
    background-color: #111;
}
.nav-btn.open span:before, .nav-btn.open span:after {
    transform-origin: 0 50%;
}
.nav-btn.open span:before {
    transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.nav-btn.open span:after {
    transform: translateX(4px) translateY(3px) rotate(-45deg);
}

As you can see we defined .open class on .nav-btn and then using javascript we toggle this class to achieve our animation on click of the .nav-btn element which is our trigger button to open the menu.
Now Let’s take a look at the structure of our html and the navigation. The navigation is defined with HTML5 element nav.

<main>
    ...
    <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <div class="container">
        <section id="about">
            <div class="content">
                <div class="title">About us</div>
                <div class="sub-title">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.
                </div>
            </div>
        </section>
        .....
</main>

Now Let’s start styling our navigation.


main nav {
    position: fixed;
    top: 0;
    right: -40%;
    height: 100vh;
    width: 40%;
    background-color: #111;
    transition: all 0.3s;
    z-index: 99999;
}
main nav ul {
    list-style: none;
    position: absolute;
    top: 100px;
    left: 50px;
}
main nav ul li {
    margin-top: 50px;
    font-size: 40px;
    font-weight: 500;
    margin-left: 300px;

    transition: all 0.3s ease-in-out;
}
main nav ul li:first-child {
    transition-delay: 0.1s;
}
main nav ul li:nth-child(2) {
    transition-delay: 0.2s;
}
main nav ul li:nth-child(3) {
    transition-delay: 0.3s;
}
main nav ul li:nth-child(4) {
    transition-delay: 0.4s;
}
main nav.open ul li {
    margin-left: 0;
}
main nav ul li a {
    text-decoration: none;
    color: #ddd;
}
main nav ul li a:hover {
    color: #fff;
}
@media screen and (max-width: 768px) {
    main nav {
        width: 90%;
        right: -90%;
    }
}
main nav.open {
    right: 0;
}

As you can see we are transitioning the right css attribute of the nav element. Also notice that we defined the navigation to be of fixed position and also the height of 100vh which means the hight of the browser viewport.

Interactivity

The interactivity is actually quite simple. We toggle the .open class when we click on the .nav-btn button.


$(function() {
    
    var navBtn = $('.nav-btn');
    function toggleNav() {
        navBtn.toggleClass('open');
        $('nav').toggleClass('open');
        $('.container').toggleClass('open');
    }
    navBtn.click(function() {
        toggleNav();
    })
    $('nav ul li a').click(function(e) {
        toggleNav();
    })  
})
Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

Share
Tweet
+1
Share