Responsive Efficient Dropdown Menu with jQuery

A small, easy-to-use jQuery plugin to create a fully responsive multi-level dropdown navigation menu for both desktop and mobile website. This plugin utilizes CSS3 media queries to detect the screen size of devices browsing your website and turns the navigation into a toggle menu on mobile devices.

How to use it:

1. Load the required main.css in the header for basic styles.

<link rel="stylesheet" href="styles/main.css">

2. Create a multi-level navigation of nested unorded lists.

<div id="cssmenu">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li class="active has-sub"><a href="#"><span>Products</span></a>
      <ul>
        <li class="has-sub"><a href="#"><span>Product 1</span></a>
          <ul>
            <li><a href="#"><span>Product 1 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 1 - 3</span></a></li>
          </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 2</span></a>
          <ul>
            <li><a href="#"><span>Product 2 - 1</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 2</span></a></li>
            <li class="last"><a href="#"><span>Product 2 - 3</span></a></li>
          </ul>
        </li>
        <li class="has-sub"> </li>
      </ul>
    </li>
    <li><a href="#"><span>About</span></a></li>
    <li class="last"><a href="#"><span>Contact</span></a></li>
  </ul>
</div>

3. Load the latest version of jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

4. Enable the responsive dropdown menu.

( function( $ ) {
  $( document ).ready(function() {
    $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
    var activeElement = $('#cssmenu>ul>li:first');

    $('#cssmenu>ul>li').each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
      }
    });


    var posLeft = activeElement.position().left;
    var elementWidth = activeElement.width();
    posLeft = posLeft + elementWidth/2 -6;
    if (activeElement.hasClass('has-sub')) {
      posLeft -= 6;
    }

    $('#cssmenu #pIndicator').css('left', posLeft);
    var element, leftPos, indicator = $('#cssmenu pIndicator');

    $("#cssmenu>ul>li").hover(function() {
        element = $(this);
        var w = element.width();
        if ($(this).hasClass('has-sub'))
        {
          leftPos = element.position().left + w/2 - 12;
        }
        else {
          leftPos = element.position().left + w/2 - 6;
        }

        $('#cssmenu #pIndicator').css('left', leftPos);
      }
      , function() {
        $('#cssmenu #pIndicator').css('left', posLeft);
      });

    $('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
    $( "#menu-button" ).click(function(){
      if ($(this).parent().hasClass('open')) {
        $(this).parent().removeClass('open');
      }
      else {
        $(this).parent().addClass('open');
      }
    });
  });
} )( jQuery );

---

This awesome jQuery plugin is developed by Andrii-Ivashkevych. For more Advanced Usages, please check the demo page or visit the official website.