Fully Responsive jQuery Dropdown Navigation Plugin - Tabs To Dropdown
File Size: | 166 KB |
---|---|
Views Total: | 11450 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.