Responsive mobile menu jQuery plugin

Mobile like menu in we projects? Try SlickNav – a responsive mobile menu jQuery plugin.

Responsive mobile menu jQuery solution

SlickNav – get started with mobile awesomeness. An easy way to implement mobile like menu.

Key features of the plugin:

– Flexible, simple markup

– Multi-level menu support

– Cross-browser compatibility

– Keyboard Accessible

– Degrades gracefully without JavaScript

– ARIA compliant menus

Examples of responsive mobile menu jQuery plugin in action
Examples of responsive mobile menu jQuery plugin in action

Usage

Include the plugin files:

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.slicknav.min.js"></script>

Create menu markup – it’s really easy:

<ul id="menu">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>

Initialize:

$(function() {
  $('#menu').slicknav();
});

In default configuration, both the original and mobile menus will be displayed. It’s good to use media queries to hide the original menu and display the mobile menu in proper cases.

For example:

.slicknav_menu {
  display: none;
}

@media screen and (max-width: 40em) {
  /* #menu is the original menu */
  .js #menu {
    display:none;
  }

  .js .slicknav_menu {
    display:block;
  }
}

We can also use Modernizr.

License: MIT

Home page, docs and download:

http://slicknav.com

GitHub:

https://github.com/ComputerWolf/SlickNav

You may also like:

Tutorial: Creating a responsive menu in jQuery, HTML5 and CSS

Bootstrap off canvas slide menu

CSS3 and jQuery single page scrolling plugin – singular.js

jQuery sliding menu plugin in mobile app style

jQuery sticky menu navigation – stickUp

Responsive, toggle sidebar menu in jQuery

Enjoy!

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