Fully Responsive jQuery Dropdown Navigation Plugin - Tabs To Dropdown

File Size: 166 KB
Views Total: 11503
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
<button id="dropdown-toggle">...</button>

Change log:


  • iOS fix click/touchstart


  • Optimisation

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