How to create a drop-down menu using jQuery?

If you want to create a drop-down menu, I have a sample codes below. It is very simple but will put your mobile much user friendly. It’s up to you on how you design the layout.

I’d like to recommend to use WDES Responsive Mobile Menu if you want your mobile views won’t take so hard viewing your menus. This will also help you to finish your task easier. It’s up to you now.

Default menu HTML output

<ul id="primary-menu" class="main-nav menu" role="menu">
  <li class="menu-item menu-item-home current-menu-item page-item-2 current_menu-item-93 first"><a href="https://www.anthonycarbon.com//">Home</a></li>
  <li class="menu-item menu-item-134"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">About</a></li>
  <li class="menu-item menu-item-has-children menu-item-829 has-children"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Classes</a>
    <ul class="sub-nav">
      <li class="menu-item menu-item-856 first"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Find a class</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-6456"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Parties</a></li>
  <li class="menu-item menu-item-has-children menu-item-96 has-children"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Parents</a>
    <ul class="sub-nav">
      <li class="menu-item menu-item-768 first"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Curriculum</a></li>
      <li class="menu-item menu-item-787"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">MADness makes sense</a></li>
      <li class="menu-item menu-item-788"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Background</a></li>
      <li class="menu-item menu-item-833"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Testimonials</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children menu-item-98 has-children"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Nurseries</a>
    <ul class="sub-nav">
      <li class="menu-item menu-item-745 first"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Early Years Organisations</a></li>
      <li class="menu-item menu-item-750"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Training Solutions</a></li>
      <li class="menu-item menu-item-has-children menu-item-757 has-children"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Accredit Nurseries</a>
        <ul class="sub-nav">
          <li class="menu-item menu-item-761 first"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Playdor Nursery</a></li>
          <li class="menu-item menu-item-766"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">General Day Nursery</a></li>
        </ul>
      </li>
      <li class="menu-item menu-item-832"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Testimonials</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children menu-item-6118 has-children"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Shop</a>
    <ul class="sub-nav">
      <li class="menu-item menu-item-6385 first"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Shop</a></li>
      <li class="menu-item menu-item-613"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Music downloads</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-565"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">ContHO</a></li>
  <li class="oppurtunity-btn menu-item menu-item-102"><a href="https://www.anthonycarbon.com/create-drop-menu-using-jquery/">Opportunity</a></li>
</ul>

JS Code:

jQuery(document).ready(function($) {
  $('.menu-item-has-children a').click(function(e) {
    e.preventDefault();
    $(this).next('.sub-nav').slideToggle();
  });
});

CSS Code:

.menu-item-has-children a {
  color: red !important;
}

ul.menu .sub-nav {
  display: none;
}

Check fiddle demo

Happy coding everyone 😀