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:


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>
<button id="dropdown-toggle">...</button>


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

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.

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 *