Fully Responsive jQuery Dropdown Navigation Plugin - Tabs To Dropdown

Tabs To Dropdown is a mobile friendly and fully responsive jQuery plugin that automatically transforms an ordinary horizontal navigation into a nice looking dropdown toggle menu on small screen devices.

Basic Usage:

1. Include the required CSS file in the header of the document.

<link rel="stylesheet" href="css/tabs-to-dropdown.css">

2. Include the jQuery javascript library and the jQuery tabs to dropdown plugin in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/tabs-to-dropdown.js"></script>

3. Create a responsive navigation menu following the Html structure like this.

<nav class="tabs-bar">
<div class="tabs-list-container">
<ul class="tabs-list">
<li><a href="#"> Menu 1 </a></li>
<li><a href="#"> Menu 2 </a></li>
<li><a href="#"> Menu 3 </a></li>
...
</ul>
</div>
<button id="dropdown-toggle">...</button>
</nav>

Change log:

2014.05.09

• iOS fix click/touchstart

2014.05.07

• Optimisation

---

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