By w3iscool, October 11, 2015
In this tutorial, we will create a simple JQuery Dropdown Menu. There are many different way to create dropdown menus, and mostly we use css for creating Dropdown.
As we know the css Dropdown menu toggle depend on the :hover selector its good option for desktop. But its not good to use :hover selector in touch devices like mobile and tablets. You can’t hover with your finger in that case JQuery will help out.
This is simple Dropdown markup here is a button with class dropdown-toggle. We will decorate .dropdown and hide with css and make clickable toggle with JQuery.
<nav> <a class="dropdown-toggle" href="#" title="Dropdown">Dropdown</a> <ul class="dropdown"> <li><a href="http://w3iscool.com/category/freebies/html-template/">HTML Templates</a></li> <li><a href="http://w3iscool.com/category/freebies/">Freebies</a></li> <li><a href="http://w3iscool.com/category/tips-tutorials">Tutorial</a></li> <li><a href="http://w3iscool.com/category/freebies/ui-kit/">UI Kits</a></li> </ul> </nav>
/* Nav Start */ nav { position: relative; width: 200px; margin: 0 auto; font-size: 16px; margin-top: 200px; } .dropdown-toggle { background: #fff; border-radius: 3px; padding: 8px; display: block; position: relative; } .dropdown-toggle:after{ content: ""; position: absolute; top: 15px; right: 12px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #0b2945; } ul.dropdown { background: #fff; border-radius: 3px; margin-top: 10px; min-width: 12em; padding: 0; position: absolute; top: 100%; width: 100%; display: none; } ul.dropdown::after { border-bottom: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; position: absolute; right: 12px; top: -5px; } ul.dropdown li { list-style-type: none; } ul.dropdown li a { text-decoration: none; padding: 8px 15px; display: block; }
This is simple css we use for menu, make sure add display:none; in Dropdown.
// Dropdown toggle fuction $('.dropdown-toggle').click(function(){ $(this).next('.dropdown').slideToggle("fast"); }); //Hide dropdown on page click $(document).on('click', function (e) { if(!$(".dropdown-toggle").is(e.target) && !$(".dropdown-toggle").has(e.target).length){ $('.dropdown').slideUp("fast"); } });
Selecting .dropdown-toggle class for click event and next select .dropdown for toggle on button click.
Now we need to hide Dropdown on anywhere click on document page.
Now you can use this technique to make a mobile friendly dropdown. If you like JQuery Dropdown Menu share with your friends.
What do you think?