Minimal Animated Dropdown Menu With jQuery - snakeMenu.js

File Size: 11.2 KB
Views Total: 3104
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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

3. Call the function and done.


4. Available options to customize the dropdown menu.


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


  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.