responsive-menu.js

A simple jQuery plugin for responsive navigation

Markup

• The HTML for the menu must contain a parent HTML element (in this case #menu-container).
• The menu itself must be assigned a class attribute value of "menu"
• The "trigger" the element that will open the menu when in mobile view, must be assigned a class of "trigger"

	<div id="menu-container"> 	  <ul class="menu">         <li><a href="#">First Item</a></li>         <li><a href="#">Second Item</a></li>         <li>             <a href="#">Third Item</a>             <ul>                 <li><a href="#">First Nested Item</a></li>                 <li><a href="#">Second Nested Item</a></li>                 <li><a href="#">Third Nested Item</a></li>             </ul>         </li> 	  </ul> 	  <a href="#" class="trigger">Menu</a> 	</div>

JS Initialization

• Include jQuery
• Include responsive-menu library
• Select element and initialize menu

<script src="jquery.js"></script> <script src="responsive-menu.js"></script> <script>   $('#menu-container').responsiveMenu(); </script>

Notes

• Currently the navigation changes from "mobile" to standard navigation at 768px screen width
  • Plans to add this a configurable option in later release
• There are no currently configurable options. Later releases will introduce options to configure things such as:
  • Responsive design breakpoints
  • Mobile animation slide speed
  • Background image for trigger element
  • Event firing system