Responsive & Nested jQuery Navigation Menu Plugin - slimMenu

slimMenu is a pretty and mobile-friendly jQuery plugin for creating responsive and nested multi-level drop down menus with smooth drop down animations and some useful options for your navigation.

Features:

• Responsive design for desktop, mobile and tablet
• Multiple instances on one page
• Easing plugin supported
• Smooth drop down animation on hover
• Customizable via CSS and options

How to use it:

1. Include jQuery library and jQuery slimMenu plugin on your web page.

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

2. Include required jQuery slimMenu plugin stylesheet to style your navigation menu

<link rel="stylesheet" type="text/css" href="slimmenu.css">

3. Markup html structure

<ul class="slimmenu">
<li> <a href="#">Slim Menu 1</a>
<ul>
<li> <a href="#">Slim Menu 1.1</a>
<ul>
<li><a href="#">Slim Menu 1.1.1</a></li>
<li> <a href="#">Slim Menu 1.1.2</a>
<ul>
<li><a href="#">Slim Menu 1.1.2.1</a></li>
<li><a href="#">Slim Menu 1.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Slim Menu 1.2</a></li>
</ul>
</li>
<li><a href="#">Slim Menu 2</a></li>
<li> <a href="#">Slim Menu 3</a>
<ul>
<li> <a href="#">Slim Menu 3.1</a>
<ul>
<li><a href="#">Slim Menu 3.1.1</a></li>
<li><a href="#">Slim Menu 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Slim Menu 3.2</a></li>
</ul>
</li>
<li><a href="#">Slim Menu 4</a></li>
</ul>

4. Call the plugin with options

$('ul.slimmenu').slimmenu(
{
/* Navigation menu will be collapsed when document width is below this size or equal to it. */
resizeWidth: '800', 

/* Make main navigation menu initially visible on mobile devices without the need to click on expand/collapse icon. */
initiallyVisible: false,

/* Collapsed menu title. */
collapserTitle: 'Main Menu', 

/* Speed of the submenu expand and collapse animation. */
animSpeed: 'medium', 

/* Easing effect that will be used when expanding and collapsing menu and submenus. */
easingEffect: null, 

/* Indentation option for the responsive collapsed submenus. 
   If set to true, all submenus will be indented with the value of the option below. 
*/
indentChildren: false, 

/* Responsive submenus will be indented with this character according to their level. */
childrenIndenter: ' ',

/* An icon to be displayed next to parent menu of collapsed sub menus. */
expandIcon: '<i>&#9660;</i>',

/* An icon to be displayed next to parent menu of expanded sub menus. */
collapseIcon: '<i>&#9650;</i>'
});

Change log:

2015-11-29

• Refactored variables, fixed some issues, optimized the code

2015-11-10

• Update jquery.slimmenu.js

---

This awesome jQuery plugin is developed by adnantopal. For more Advanced Usages, please check the demo page or visit the official website.