jQuery Plugin for Responsive Menu System - meanMenu

jQuery Plugin for Responsive Menu System - meanMenu
File Size: 13.6 KB
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="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

Changelog:

2014-11-01

  • v2.0.8

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