jQuery Mobile Toggle Menu With CSS3 Media Queries - Biggie

Biggie is a jQuery menu plugin that converts a horizontal navigation menu into a mobile-friendly drop down toggle menu while the page size has reached the CSS3 Media Queries Break Points.

How to use it:

1. Load the jQuery biggie's stylesheet file in the header.

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

2. Create a navigation menu using nested ul and li elements.

<nav class="mainNavigation">
<ul>
<li><a href="https://www.jqueryscript.net">jQuery Plugins</a></li>
<li><a class="trigger" href="#">Categories</a>
<ul class="dropdown">
<li><a href="https://www.jqueryscript.net/slider/">jQuery Slider Plugins</a></li>
<li><a href="https://www.jqueryscript.net/slideshow/">jQuery Slideshow Plugins</a></li>
<li><a href="https://www.jqueryscript.net/menu/">jQuery Menu Plugins</a></li>
<li><a href="https://www.jqueryscript.net/table/">jQuery Table Plugins</a></li>
<li><a href="https://www.jqueryscript.net/gallery/">jQuery Gallery Plugins</a></li>
</ul>
</li>
<li><a href="https://www.jqueryscript.net/popular/">Popular Plugins</a></li>
<li><a href="https://www.jqueryscript.net/blog/">Blog</a></li>
<li><a href="http://twitter.com/joericho" rel="nofollow">@joericho</a></li>
</ul>
<div class="nav-btn"> <i class="glyph-list-white"></i> </div>
</nav>

3. Include the jQuery javascript library and jQuery biggie plugin at the end of your document. That's it.

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

---

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