How to Create an iOS Style Sliding Panel With jQuery?

1 Apr , 2014  jQuery 

Easily create an iOS style sliding menu or panel using jQuery and CSS.

We thought of sharing an iOS style slide menu designed by Jason Howmans. He has used great and yet simple techniques to create this wonderful iOS slide panel. We have analysed and thought of recreating this menu in our space with a demo link and a full code download. We have not done any changes to the code, except the background color and link colors on the side panel.

In our previous articles(for your inspiration), we have composed about slide panel jQuery plugins and about “list of tutorials on menu and navigations“.

iOS Style Slide Menu Tutorial

You can check out the demo below, and also you can quickly download the full code of the tutorial.

DEMO | DOWNLOAD

HTML:

CSS:

Fonts:

jQuery:

Explanation:

In this, the developer has designed a simple navigation slide panel upon clicking the 3 bar menu button on the top as seen on iOS devices. The icons used on the slide panel and the trigger are the best part of this tutorial. We have a trigger set, which is the target to get the slide menu. Initially, the navigation panel is set to hidden state. When the trigger is clicked the slide panel comes up from the left side of the screen pushing the layout. This is the jQuery script which does the trick:

Hope you enjoyed this tutorial. Stay tuned for more.



, , ,

  • Dwight

    How do you add link destinations to the different menu items?