Fully Responsive jQuery Tabs to Dropdown Navigation
If you are looking for a nice solution for a mobile navigation, you may wish to try Tabs to dropdown. Tabs to dropdown is a fully responsive and mobile friendly jQuery navigation plugin that transforms automatically from a normal horizontal navigation to a lovely looking dropdown toggle menu on mobile devices. It is also very easy to implement so you can set it up in a few minutes. Styling it is also a piece of cake so if you want to have a nice looking and a bit different one from the popular you may follow the steps below and use it on your web design projects.
How to use jQuery Tabs to Dropdown plugin:
Create an HTML menu structure:
<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>
Include the CSS in the header of the HTML document:
<link rel="stylesheet" href="css/tabs-to-dropdown.css">
Include the jQuery library and jQuery Tabs to Dropdown plugin in the footer of the HTML document:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/tabs-to-dropdown.js"></script>
That’s it! You are ready to go to style the menu according to your site’s design.
Download jQuery Tabs to Dropdown