Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Animated side menu

animated side menu navigation
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.

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.

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.

Now Let’s start styling our navigation.

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.


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