JQuery DropDown Menu Toggle

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.

The HTML

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>

The CSS

/* 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.

The JQuery

	// 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.

 

Demo   Download Source