Responsive facebook style slide navigation menu for small devices using Jquery and twitter bootstrap

Today we are going to implement facebook style slide navigation menu from existing website menu for small devices using jquery and twitter bootstrap and some custom css.

For this tutorial i have used

  • CSS3
  • Twitter Bootstrap
  • Jquery

‘Here is example : It is normal website and it has some menu items. It is also displayed well in small device because of using twitter bootstrap. In small devices it shows at the top. But this tutorial guide you to create left slide menu navigation like facebook. And it quite user friendly

In Large Devices(Like desktop, laptops and …):



It shows in Small devices(Like mobile ..):



When comes to the implementation, we need to add some jquery functionality to change the menu based on device width

Jquery (slide-menu.js):



Also i have given demo and you can check it in your mobile as well.

Thank you….
Demo and Download

  • met medications

    Pretty nice post. I just stumbbled upon youur
    weblog and wished to say that I’ve really enjoyed surfing arolund your
    blog posts. After all I will bee subscribing
    to your rss feed and I hope you write again very soon!

  • niels

    This is a a very cool function…

    But is there ony way you could have a second and third step in the drop-down structure, it would be nice to have a 3 step navigation.. ?