Off Canvas Slide Menu For Bootstrap


We have put together a great off canvas slide menu plugin for you to use, hack up and add to your next web design project. A little freebie for your Bootstrap toolkit.

 

Mobile web design is here to stay, that’s for sure. Creating great user experiences across digital media can be a daunting task. So we wanted to give you one of our prized possessions and help to make it a bit easier for you. Here is the off canvas sliding menu we use in our latest Bootstrap theme Plixis.

 

Download with a Tweet! Demo

 


The HTML

Basically we are using two elements here. The actual hidden nav and the button which triggers it using a combination of CSS3 and Jquery. Below you will see the standard HTML markup with no bells and whistles. We are using our favorite icon set from FontAwesome in this code as well.


 


The CSS

Let’s make the magic. We will start with the navigation button. In this animation we will need to control each element of the navigation button and sliding navigation separately using CSS3. See below for the styles used to do this.

 


 

Next we will style the off canvas menu. Here you can adjust the background color of the menu container.


 

Finally we will style the menu and animations on hover. You can adjust fonts, sizes, colors, etc of the menu links. Since FontAwesome is svg based, we can use the icons in our CSS as well as HTML.


 


The Jquery

This is the final step to making this menu work. This includes the dropdown slide and triggers the menu on click.

 


 

Tell us what you think

Hope you find this menu and tutorial helpful. Feel free to hack it up and make it yours. If you don’t have twitter and want to get the menu you can download it here. Stay tuned for more freebies and tutorials on Bootstrap.