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.

Download jQuery Tabs to Dropdown

How to use jQuery Tabs to Dropdown plugin:

HTML

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>

CSS

Include the CSS in the header of the HTML document:

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

jQuery

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