Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

slimMenu jQuery Navigation Menu Plugin.

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)!

Features:

  • Multi-level nested menus.
  • 100% mobile responsive menus.
  • Multiple slimMenu navigations on the same page.
  • Tap areas to toggle sub menus easily in touch devices.
  • Hover option and effects for desktop version.
  • Sub menu indentation options for responsive version.

Browser Support:

(Tested on following browsers and confirmed that the slimMenu is working.)

  • IE 9+
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Opera
  • Android 2.2+
  • Mobile Safari

Installation:

Add dist/css/slimmenu.min.css to the head of your document:

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

Add dist/js/jquery.slimmenu.min.js after jQuery plugin and before closing body tag.

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

Create your navigation menu using an ordered list and add slimmenu class:

<ul class="slimmenu">...</ul>

Initilalize the plugin:

$('.slimmenu').slimmenu(
{
    resizeWidth: '767', /* Navigation menu will be collapsed when document width is below this size or equal to it. */
    initiallyVisible: false, /* Make main navigation menu initially visible on mobile devices without the need to click on expand/collapse icon. */
    collapserTitle: 'Main Menu', /* Collapsed menu title. */
    animSpeed: 'medium', /* Speed of the sub menu expand and collapse animation. */
    easingEffect: null, /* Easing effect that will be used when expanding and collapsing menu and sub menus. */
    indentChildren: false, /* Indentation option for the responsive collapsed sub menus. If set to true, all sub menus will be indented with the value of the option below. */
    childrenIndenter: '&nbsp;' /* Responsive sub menus will be indented with this character according to their level. */
    expandIcon: '<i>&#9660;</i>', /* An icon to be displayed next to parent menu of collapsed sub menus. */
    collapseIcon: '<i>&#9650;</i>' /* An icon to be displayed next to parent menu of expanded sub menus. */
});

Optional Add easing plugin after jQuery plugin and before closing body tag if you want to use easing effects.

<script src="**PATH_TO_PLUGIN**/jquery.easing.min.js"></script>

Support

If you need help using slimMenu, have a suggestion or idea, or have found a bug, please create an issue.

About

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

Resources

Packages

No packages published
You can’t perform that action at this time.