Multi-level push menu with jQuery

OVERVIEW

INTRO

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

FEATURES

  • 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

USAGE

Include the CSS

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

FontAvesome (icons)

Font I like (use any other you like)

 

Multi-Level-Push-Menu

Include the JS

jQuery

Modernizr (needed for IE8)

Multi-Level-Push-Menu

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.

 

Initialize

With HTML markup.

With JS Array.

DEMO

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

DOWNLOAD

Leave a Reply

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