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.


Don’t struggle alone with projects

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


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

Related post:  CollagePlus - An image gallery plugin for jQuery
Divi WordPress Theme

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 *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.