Multi-level Push Menu – Endless Nesting of Navigation Elements

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).

multilevel-menu

Features

  • Multi-level menu support
  • Endless nesting of navigation elements
  • 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, Methods and Events

Cross-browser compatibility

Chrome, Midori, Firefox, Safari, IE8+, Opera 12.16, Android Browser 4.1.2, iOS Safari 7.0.1

DEMOS DOWNLOAD

Usage

Include the CSS

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

FontAvesome (icons)

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">

Font I like (use any other you like)

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

Multi-Level-Push-Menu

<link rel="stylesheet" href="multilevelpushmenu.css" />

Include the JS

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Modernizr (needed for IE8)

<script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>

Multi-Level-Push-Menu

<script src="jquery.multilevelpushmenu.min.js></script>

HTML Markup

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

<div id="menu">
  <nav>
    <h2><i class="fa fa-reorder"></i>All Categories</h2>
    <ul>
        <li>
            <a href="#"><i class="fa fa-laptop"></i>Devices</a>
            <h2><i class="fa fa-laptop"></i>Devices</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
                    <h2><i class="fa fa-phone"></i>Mobile Phones</h2>
                    <ul>
                        <li>
                            <a href="#">Super Smart Phone</a>
                        </li>
                        <li>
                            <a href="#">Thin Magic Mobile</a>
                        </li>
                        <li>
                            <a href="#">Performance Crusher</a>
                        </li>
                        <li>
                            <a href="#">Futuristic Experience</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-desktop"></i>Televisions</a>
                    <h2><i class="fa fa-desktop"></i>Televisions</h2>
                    <ul>
                        <li>
                            <a href="#">Flat Super Screen</a>
                        </li>
                        <li>
                            <a href="#">Gigantic LED</a>
                        </li>
                        <li>
                            <a href="#">Power Eater</a>
                        </li>
                        <li>
                            <a href="#">3D Experience</a>
                        </li>
                        <li>
                            <a href="#">Classic Comfort</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
                    <h2><i class="fa fa-camera-retro"></i>Cameras</h2>
                    <ul>
                        <li>
                            <a href="#">Smart Shot</a>
                        </li>
                        <li>
                            <a href="#">Power Shooter</a>
                        </li>
                        <li>
                            <a href="#">Easy Photo Maker</a>
                        </li>
                        <li>
                            <a href="#">Super Pixel</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-book"></i>Magazines</a>
            <h2><i class="fa fa-book"></i>Magazines</h2>
            <ul>
                <li>
                    <a href="#">National Geographics</a>
                </li>
                <li>
                    <a href="#">The Spectator</a>
                </li>
                <li>
                    <a href="#">Rambler</a>
                </li>
                <li>
                    <a href="#">Physics World</a>
                </li>
                <li>
                    <a href="#">The New Scientist</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
            <h2><i class="fa fa-shopping-cart"></i>Store</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-tags"></i>Clothes</a>
                    <h2><i class="fa fa-tags"></i>Clothes</h2>
                    <ul>
                        <li>
                            <a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
                            <h2><i class="fa fa-female"></i>Women's Clothing</h2>
                            <ul>
                                <li>
                                    <a href="#">Tops</a>
                                </li>
                                <li>
                                    <a href="#">Dresses</a>
                                </li>
                                <li>
                                    <a href="#">Trousers</a>
                                </li>
                                <li>
                                    <a href="#">Shoes</a>
                                </li>
                                <li>
                                    <a href="#">Sale</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
                            <h2><i class="fa fa-male"></i>Men's Clothing</h2>
                            <ul>
                                <li>
                                    <a href="#">Shirts</a>
                                </li>
                                <li>
                                    <a href="#">Trousers</a>
                                </li>
                                <li>
                                    <a href="#">Shoes</a>
                                </li>
                                <li>
                                    <a href="#">Sale</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Jewelry</a>
                </li>
                <li>
                    <a href="#">Music</a>
                </li>
                <li>
                    <a href="#">Grocery</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Collections</a>
        </li>
        <li>
            <a href="#">Credits</a>
        </li>
    </ul>
  </nav>
</div>

JS Array (instead HTML Markup)

You can use JS Array instead of above HTML markup.

<script>
var arrMenu = [
  {
    title: 'All Categories',
    icon: 'fa fa-reorder',
    items: [
      {
        name: 'Devices',
        icon: 'fa fa-laptop',
        link: '#',
        items: [
          {
            title: 'Devices',
            icon: 'fa fa-laptop',
            items: [
              {
                name: 'Mobile Phones',
                icon: 'fa fa-phone',
                link: '#',
                items: [
                  {
                    title: 'Mobile Phones',
                    icon: 'fa fa-phone',
                    link: '#',
                    items: [
                      {
                        name: 'Super Smart Phone',
                        link: '#'
                      },
                      {
                        name: 'Thin Magic Mobile',
                        link: '#'
                      },
                      {
                        name: 'Performance Crusher',
                        link: '#'
                      },
                      {
                        name: 'Futuristic Experience',
                        link: '#'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'Televisions',
                icon: 'fa fa-desktop',
                link: '#',
                items: [
                  {
                    title: 'Televisions',
                    icon: 'fa fa-desktop',
                    link: '#',
                    items: [
                      {
                        name: 'Flat Super Screen',
                        link: '#'
                      },
                      {
                        name: 'Gigantic LED',
                        link: '#'
                      },
                      {
                        name: 'Power Eater',
                        link: '#'
                      },
                      {
                        name: '3D Experience',
                        link: '#'
                      },
                      {
                        name: 'Classic Comfort',
                        link: '#'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'Cameras',
                icon: 'fa fa-camera-retro',
                link: '#',
                items: [
                  {
                    title: 'Cameras',
                    icon: 'fa fa-camera-retro',
                    link: '#',
                    items: [
                      {
                        name: 'Smart Shot',
                        link: '#'
                      },
                      {
                        name: 'Power Shooter',
                        link: '#'
                      },
                      {
                        name: 'Easy Photo Maker',
                        link: '#'
                      },
                      {
                        name: 'Super Pixel',
                        link: '#'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'Magazines',
        icon: 'fa fa-book',
        link: '#',
        items: [
          {
            title: 'Magazines',
            icon: 'fa fa-book',
            items: [
              {
                name: 'National Geographics',
                link: '#'
              },
              {
                name: 'Scientific American',
                link: '#'
              },
              {
                name: 'The Spectator',
                link: '#'
              },
              {
                name: 'Rambler',
                link: '#'
              },
              {
                name: 'Physics World',
                link: '#'
              },
              {
                name: 'The New Scientist',
                link: '#'
              }
            ]
          }
        ]
      },
      {
        name: 'Store',
        icon: 'fa fa-shopping-cart',
        link: '#',
        items: [
          {
            title: 'Store',
            icon: 'fa fa-shopping-cart',
            items: [
              {
                name: 'Clothes',
                icon: 'fa fa-tags',
                link: '#',
                items: [
                  {
                    title: 'Clothes',
                    icon: 'fa fa-tags',
                    items: [
                      {
                        name: 'Women\'s Clothing',
                        icon: 'fa fa-female',
                        link: '#',
                        items: [
                          {
                            title: 'Women\'s Clothing',
                            icon: 'fa fa-female',
                            items: [
                              {
                                name: 'Tops',
                                link: '#'
                              },
                              {
                                name: 'Dresses',
                                link: '#'
                              },
                              {
                                name: 'Trousers',
                                link: '#'
                              },
                              {
                                name: 'Shoes',
                                link: '#'
                              },
                              {
                                name: 'Sale',
                                link: '#'
                              }
                            ]
                          }
                        ]
                      },
                      {
                        name: 'Men\'s Clothing',
                        icon: 'fa fa-male',
                        link: '#',
                        items: [
                          {
                            title: 'Men\'s Clothing',
                            icon: 'fa fa-male',
                            items: [
                              {
                                name: 'Shirts',
                                link: '#'
                              },
                              {
                                name: 'Trousers',
                                link: '#'
                              },
                              {
                                name: 'Shoes',
                                link: '#'
                              },
                              {
                                name: 'Sale',
                                link: '#'
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                name: 'Jewelry',
                link: '#'
              },
              {
                name: 'Music',
                link: '#'
              },
              {
                name: 'Grocery',
                link: '#'
              }
            ]
          }
        ]
      },
      {
        name: 'Collections',
        link: '#'
      },
      {
        name: 'Credits',
        link: '#'
      }
    ]
  }
];
</script>

Initialize

With HTML markup.

<script>
    $(document).ready(function(){
        $('#menu').multilevelpushmenu();
    });
</script>

With JS Array.

<script>
    $(document).ready(function(){
        $('#menu').multilevelpushmenu({
            menu: arrMenu
        });
    });
</script>

Options

Full list of options is provided below.

container: $( '#menu' ),                                   // Holding container.
containersToPush: [ $( '#content1' ), $( '#content2' ) ],  // Array of DOM elements to push/slide together with menu.
collapsed: false,                                          // Initialize menu in collapsed/expanded mode
menuID: "multilevelpushmenu",                              // ID of the <nav> element.
wrapperClass: 'multilevelpushmenu_wrapper',                // Wrapper CSS class.
menuInactiveClass: 'multilevelpushmenu_inactive',          // CSS class for inactive wrappers.
menu: arrMenu,                                             // JS array of menu items (if markup not provided).
menuWidth: 0,                                              // Wrapper width (integer, '%', 'px', 'em').
menuHeight: 0,                                             // Menu height (integer, '%', 'px', 'em').
backText: 'Back',                                          // Text for 'Back' menu item.
backItemClass: 'backItemClass',                            // CSS class for back menu item.
backItemIcon: 'fa fa-angle-right',                         // FontAvesome icon used for back menu item.
groupIcon: 'fa fa-angle-left',                             // FontAvesome icon used for menu items contaning sub-items.
mode: 'overlap',                                           // Menu sliding mode: overlap/cover.
overlapWidth: 40,                                          // Width in px of menu wrappers overlap
preventItemClick: true,                                    // set to false if you do not need event callback functionality
preventGroupItemClick: true,                               // set to false if you do not need event callback functionality
direction: 'ltr'                                           // set to 'rtl' for reverse sliding direction

Methods

Full list of exposed methods is provided below.

/**
 * Initialize menu
 */
$('#menu').multilevelpushmenu();
// or
$('#menu').multilevelpushmenu('init');

/**
 * Collapse menu
 */
// Full collapse
$('#menu').multilevelpushmenu('collapse');

// Collapse menu down to level 1 (0 level represent root level expanded)
$('#menu').multilevelpushmenu('collapse', 1);

// Collapse menu down to the level of $menuLevelObject
$('#menu').multilevelpushmenu('collapse', $menuLevelObject);

// Collapse menu down to the level of menu level object with title 'Devices' (not really recommended since 
there could be many menu level objects with the same title; in such cases collasing will be unsuccessful)
$('#menu').multilevelpushmenu('collapse', 'Devices');

/**
 * Expand menu
 */
// Menu expand from fully collapsed mode to level 0
$('#menu').multilevelpushmenu('expand');

// Expand menu up to the $menuLevelObject
$('#menu').multilevelpushmenu('expand', $menuLevelObject);

// Expand menu up to the menu level object with title 'Devices' (not recommended since there could be 
many menu level objects with the same title; in such cases expanding will be unsuccessful)
$('#menu').multilevelpushmenu('expand', 'Devices');

/**
 * Menu Expanded?
 * Check if menu level object is already expanded (returns true/false)
 */
$('#menu').multilevelpushmenu('menuexpanded', $menuLevelObject);

/**
 * Active (last expanded) menu level
 * Returns active menu level object, or false if menu is fully collapsed
 */
$('#menu').multilevelpushmenu('activemenu');

/**
 * Find menu level(s) by title
 * Provides collection of menu level objects matching provided menu title, or false if there is no match
 */
$('#menu').multilevelpushmenu('findmenusbytitle', 'Devices');

/**
 * Find menu item(s) by name
 * Provides collection of menu item objects matching provided name, or false if there is no match
 */
$( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Devices' );

/**
 * Find path to root of selected menu level object
 * Provides chain collection of menu level objects (root menu level object to given menu level object), or false in case of error
 */
$('#menu').multilevelpushmenu('pathtoroot', $menuLevelObject);

/**
 * Find shared path or path differences of two given menu level objects
 * Provides collection of shared menu level objects of two menu level objects if bool parameter is set to true, 
or collection of menu level objects representing differences if bool is false; or false if there is no match
 */
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, bool);

// Shared path collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, true);

// Differences collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, false);

/**
 * Get or Set plug-in options
 * Get (if third parameter is not set) or Set selected plug-in option
 */
// Get
$('#menu').multilevelpushmenu('option', 'mode');

// Set
$('#menu').multilevelpushmenu('option', 'mode', 'cover');

/**
 * Add/Remove menu item(s) with sub-menus
 * 
 */
// Add
$('#menu').multilevelpushmenu( 'additems' , itemsArray , $addToMenu , position );

// Remove
$('#menu').multilevelpushmenu( 'removeitems' , items );

DEMOS DOWNLOAD

Related post:  Icon-Works: A beautifully crafted icon font
Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close