Minimal Animated Dropdown Menu With jQuery - snakeMenu.js

snakeMenu.js is a really small jQuery plugin which appends a responsive, animated, and hover-triggered dropdown menu to any element you specify.

Basic usage:

1. Include the necessary JavaScript libraries on the web page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/snakeMenu.min.js"></script>

2. Create the dropdown menus for your nav items as follows. Note that the data-menuitem and data-boxitem must have the same value.

<ul class="snakeMenu">
  <li class="snakeMenuItem" data-menuitem="1"><a href="#home">Home</a></li>
  <li class="snakeMenuItem" data-menuitem="2"><a href="#about">About</a></li>
  <li class="snakeMenuItem" data-menuitem="3"><a href="#contact">Contact</a></li>
  ...
</ul>

<div class="snakeBox">
  <div class="snakeBoxItem" data-boxitem="1">
    Content-1
  </div>
  <div class="snakeBoxItem" data-boxitem="2">
    Content-2
  </div>
  <div class="snakeBoxItem" data-boxitem="3">
    Content-3
  </div>
  ...
</div>

3. Call the function and done.

$('.snakeMenu').snakeMenu();

4. Available options to customize the dropdown menu.

$('.snakeMenu').snakeMenu({

  // Default CSS selectors
  menuCont: '.snakeMenu',
  menuItem: '.snakeMenuItem',
  menuItemData: 'menuitem',
  boxCont: '.snakeBox',
  boxItem: '.snakeBoxItem',
  boxItemData: 'boxitem',
  noActiveMenuItem: 'snakeItemNoActive',
  cssMenuItemActive: 'snm-item-active',

  // Disables snakeMenu when window resolution smaller than this
  destroySnakeRes: 767, 

  // Delay in milliseconds
  mouseDelay: 250, 

  // Position of menu box
  boxOffsetTop: 0,
  boxOffsetBottom: 0,
  boxOffsetLeft: 0,
  boxOffsetRight: 0
  
});

5. Add custom open/close animations to dropdown menus.

$('.snakeMenu').snakeMenu({

  animOpen: function () {
    // ...
  },

  animClose: function () {
    // ...
  }

});

---

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