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.

jQuery-Tabs-To-Dropdown-Plugin

 

jQuery-Tabs-To-Dropdown-Plugin
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:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

<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


You may also like...

1 Response

  1. sarawoot says:

    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *