Simple jQuery Left Slide Out Menu – Code Snippet #24

24 Feb , 2014  Code Snippets 

Simple-Slide-out-menu-jQueryCode Snippet #24: The code shows us how to create a simple jQuery left slide out menu with the help of show() and hide() functions. Show the sub-menus by clicking the master or parent menu with jQuery animations.

jQuery is a powerful UI tool to create any kind of web animations. We have jQuery UI set ups to bring life to the web page with lots of animated interactions. Today, we are going to see how to achieve a animated left slide out animation with the help of jQuery and jQuery UI.

In our previous articles, we saw a tutorial on Android style left side navigation, and also plugins to slide the left panel. We would like to share a simple jQuery toggle style animation on your left menu with few lines of code.

Demo below: [Click on the Menu to see the hidden menus to slide and appear]

HTML Markup:

jQuery:

CSS3:

Explanation:

We initially start by creating a menu. Only the parent menu is seen. Then, the sub-menus are created and they are hidden using the below CSS:

Now, upon clicking the parent menu, all the sub-menus appear in an animated fashion. The parent menu is hidden.

When the sub-menu is clicked again, the parent menu appears and all the sub-menus disappear. This is the code for that:

Hope you liked this code snippet. We learnt how to easily create a simple slide our jQuery menu. Stay tuned for more such code snippets and tutorials.



, ,

Comments are closed.