jquery.hoverForMenu.js - Demo

Simple jQuery plugin for easy navigation through drop-down menus.

HTML

<script src="https://cdn.rawgit.com/Baskerville42/hoverForMenu/v1.0.0/jquery.hoverForMenu.js"></script>
<nav id="mainmenu">
  <ul>
    <li>
      <a href="#">Hover me</a>
      <ul class="dropdown">
        <li><a href="#">Drop-down link 1</a></li>
        <li><a href="#">Drop-down link 1</a></li>
        <li><a href="#">Drop-down link 1</a></li>
        <li><a href="#">Drop-down link 1</a></li>
        <li><a href="#">Drop-down link 1</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Hover me</a>
      <ul class="dropdown">
        <li><a href="#">Drop-down link 2</a></li>
        <li><a href="#">Drop-down link 2</a></li>
        <li><a href="#">Drop-down link 2</a></li>
        <li><a href="#">Drop-down link 2</a></li>
        <li><a href="#">Drop-down link 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Hover me</a>
      <ul class="dropdown">
        <li><a href="#">Drop-down link 3</a></li>
        <li><a href="#">Drop-down link 3</a></li>
        <li><a href="#">Drop-down link 3</a></li>
        <li><a href="#">Drop-down link 3</a></li>
        <li><a href="#">Drop-down link 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Hover me</a>
      <ul class="dropdown">
        <li><a href="#">Drop-down link 4</a></li>
        <li><a href="#">Drop-down link 4</a></li>
        <li><a href="#">Drop-down link 4</a></li>
        <li><a href="#">Drop-down link 4</a></li>
        <li><a href="#">Drop-down link 4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Hover me</a>
      <ul class="dropdown">
        <li><a href="#">Drop-down link 5</a></li>
        <li><a href="#">Drop-down link 5</a></li>
        <li><a href="#">Drop-down link 5</a></li>
        <li><a href="#">Drop-down link 5</a></li>
        <li><a href="#">Drop-down link 5</a></li>
      </ul>
    </li>
  </ul>
</nav>

SCSS

nav#mainmenu {
  font-size: 1rem;
  width: 100%;
  background-color: rgba(#aeaeae, .2);
  position: relative;
  
  > ul {
    display: flex;
    flex-direction: row;
    
    > li {
      padding: .5em;
      
      > a {
        font-size: 1.05em;
        text-transform: lowercase;
      }
    }
  }
  
  a {
    color: blue;
    
    &:not(:hover) {
      text-decoration: none;
    }
  }
  
  ul ul {
    display: none;
  }
  
  .dropdown {
    min-width: 100%;
    background-color: rgba(#aeaeae, .4);
    display: none;
    position: absolute;
    top: 2rem;
    left: 0;
    padding-bottom: 1rem;
    flex-direction: row;
    
    &.visible {
      display: flex;
    }
    
    a {
      display: block;
      padding: 1rem 1rem 0;
      white-space: nowrap;
    }
  }
}

JavaScript

$(document).ready(function () {

  $('#mainmenu > ul > li').hoverForMenu({
    onMouseEnter: {
      t: 300,
      fn: function () {
        $('.dropdown', this).addClass('visible');
      }
    },
    onMouseLeave: {
      t: 300,
      fn: function () {
        $('.dropdown', this).removeClass('visible');
      }
    }
  });
  
});