jQuery Android Style Navigation Slide Menu

9 Jul , 2013  jQuery 

jQuery-Sliding-Panel-Android-Style-MenuThis tutorial teaches us how to create simple Android style Navigation slide menu using jQuery.

If you are a smartphone user, then it is common to see a slide to open menu in your mobile application(s). This is a trend in many Android and iOS applications. These slide to open navigation can be reconstructed similarly in HTML using jQuery plugin. If you are familiar with the Facebook application on Android devices, then you can make some comparison with the navigation menu there with this tutorial.

In our tutorial using jQuery, we don’t use any other plugins other than jQuery. This tutorial is a simple way of adding an Android style navigation menu to your website. We have also introduced a three horizontal lines using no images but only HTML ASCII symbols. This 3 line menu is also found in the Android application. This is where the user clicks to slides open the menu items.

Before we proceed, please view the demo below:

DEMO | DOWNLOAD

The Code behind the scene are given below starting with HTML, CSS and then jQuery.

HTML Markup:

CSS:

jQuery: [This does all the animation for sliding]

Explanation:

The HTML and CSS are easy to understand. In the HTML, we have added a placeholder by name “button“. This is an ID, which when clicked enables the slide panel to slide. In the jQuery script we have used the toggle function to toggle the slide panel menu which pushes the right content area by 200px. Here is the code below:

Initially, the panel is hidden to the users, by using the below jQuery script.

The Character “⛸” is for three horizontal lines. and the character “⛿” is for three horizontal lines split in the middle. We I’ve not used any images to add the menu navigation three horizontal lines in the slide pane.

DEMO | DOWNLOAD

Hope you enjoyed this tutorial. Please let us know if you are facing any issues or problems while implementing and trying out this tutorial for your project.



, ,