jQuery Plugin for Responsive Menu System - meanMenu

jQuery Plugin for Responsive Menu System - meanMenu
File Size: 13.3KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

meanMenu is a jQuery plugin that makes your navigation menus responsive and compatible with desktop, mobile and tablet devices. 

How to use it:

1. Include the latest jQuery library in your head section

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

2. Include meanMenu CSS to style your menu

<link rel="stylesheet" href="meanmenu.css" media="all" />

3. Markup

<header>
<nav>
<ul>
<li><a href="#">Top Level Link</a>
<ul>
<li><a href="#">Second Level Link</a>
<ul>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a>
<ul>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a>
<ul>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
</ul>
</li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
</ul>
</nav>
</header>

4. Include meanMenu.js and then call the plugin with options

<script src="jquery.meanmenu.js"></script> 
<script>
jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
});
</script>

5. Options

meanMenu: "header nav", // Target the current HTML markup you wish to replace
meanMenuClose: "X", // single character you want to represent the close menu button
meanMenuCloseSize: "18px", // set font size of close button
meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closed
meanRevealPosition: "right", // left right or center positions
meanRevealPositionDistance: "0", // Tweak the position of the menu
meanRevealColour: "", // override CSS colours for the reveal background
meanRevealHoverColour: "", // override CSS colours for the reveal hover
meanScreenWidth: "480", // set the screen width you want meanmenu to kick in at
meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing.
meanShowChildren: true // true to show children in the menu, false to hide them

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