jQuery sliding menu plugin in mobile app style

A nice and responsive jQuery sliding menu plugin in mobile app list style. Easy creation of mobile app style sliding navigation menu.

jQuery sliding menu – mobile like

Mobile app list-style navigation in the browser (for web apps). Just a mobile-first example of using CSS and jQuery, to make a decent multi-level responsive sliding navigation menu.

jQuery sliding menu plugin
jQuery sliding menu plugin

Usage

Add libraries:

<link rel="stylesheet" href="dist/css/sliding-menu-min.css" />
<script src="dist/js/sliding-menu.min.js"></script>

Create HTML structure for the menu:


<div id="menu">
  <ul>
    <li>
      <a href="#">Artists</a>
      <ul>
        <li>
          <a href="#">Aerosmith</a>
          <ul>
            <li>
              <a href="#">Get Your Wings</a>
              <ul>
                <li>
                  <a href="#Something">Something</a>
                </li>
                ...
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Eagles</a>
          <ul>
            <li>
              <a href="#">Hotel California</a>
              <ul>
                <li>
                  <a href="#Hotel-California">Hotel California</a>
                </li>
                ...
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Led Zeppelin</a>
          <ul>
            <li>
              <a href="#">Physical Graffiti</a>
              <ul>
                <li>
                  <a href="#Houses">Houses</a>
                </li>
                ...
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    ...
    <li>
     ....
    </li>
  </ul>
</div>

Apply the plugin:

$(document).ready(function() {
  $("#menu").slidingMenu();
});

The defaults are set as:

defaults = {
    className : "",
    transitionDuration : 250,
    dataJSON : false,
    initHref : false,
    backLabel: 'Back'
};

Reference:

– className – adicional class for menu element (String)

– transitionDuration – default slide animation speed (Number)

– dataJSON – a JSON object to build the menu from. Check our JSON example (Boolean)

– initHref – the link to the selected panel; set to false (boolean) to use the root panel (String)

– backLabel – label for the back button; set to true to use the link’s own label

License: MIT

Demo / homepage:

http://github.danielcardoso.net/sliding-menu

Get jQuery sliding menu plugin from GitHub:

https://github.com/danielcardoso/sliding-menu

See also:

Similar (base) solution

Query sticky menu navigation – stickUp

jQuery Amazon like menu – mega sidebar menu plugin

Creating 3D rotatable objects with jQuery Interactive 3D plugin

Nexus like sidebar menu with CSS3 and JavaScript

Ascensor.js – jQuery content scroller (Swiss quality)

Slide in CSS image captions

Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1