Windows – Linux – Mac OSX Guides

jQuery multi level push menu



This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).

For more detail, please go to the plugin’s homepage


  • Multi-level menu support
  • Endless nesting of navigation elements
  • Expand/Collapse navigation with a left/right swipe gesture
  • Push/Slide DOM elements of choice
  • Left-to-right and Right-to-left sliding directions
  • Flexible, simple markup
  • JS Array input, as HTML markup replacement
  • A number of exposed Options (1 NEW! added), Methods (3 NEW! added) and Events
  • Cross-browser compatibility
    • Chrome
    • Midori
    • Firefox
    • Safari
    • IE8+
    • Opera 12.16
    • Android Browser 4.1.2
    • iOS Safari 7.0.1


Include the CSS

“multilevelpushmenu.css” can be modified to fit website design.

FontAvesome (icons)

Font I like (use any other you like)



Include the JS


Modernizr (needed for IE8)


HTML Markup

Copy HTML markup below to create menu with exacty the same items like shown in Demo.

JS Array (instead HTML Markup)

You can use JS Array instead of above HTML markup.



With HTML markup.

With JS Array.


See the Pen Multi-level push menu by Thanh Nguyen (@genievn) on CodePen.7504


Tagged with:     ,

Related Articles

Loading Facebook Comments ...

Post your comments

Your email address will not be published. Required fields are marked *