Easy Customizable Sliding Menu Indicator Plugin - SlidingMenu

Just another jQuery plugin used for creating a customizable sliding indicator to highlight the current/active menu item you're hovering on.

See also:

• Pure CSS3 Animated Sliding Menu
• Responsive Lava Lamp Style Navigation Plugin With jQuery
• jQuery Plugin for Creating a Navigation Menu with Sliding Lines
• jQuery Plugin For LavaLamp-Like Menu Hover Effect - Lavazi
• jQuery Animated Navigation with Sliding Background - Lava Lamp

How to use it:

1. Create a standard nav menu for your webpage.

<nav class="menu-example example">
  <ul>
    <li>
      <a href="#" class="menu-example__item active">Home</a>
    </li>
    <li>
      <a href="#" class="menu-example__item">Blog</a>
    </li>
    <li>
      <a href="#" class="menu-example__item">Category</a>
    </li>
    <li>
      <a href="#" class="menu-example__item">Contact</a>
    </li>
    <li>
      <a href="#" class="menu-example__item">About</a>
    </li>
  </ul>
</nav>

2. The required CSS styles for the sliding menu indicator.

.menu-sliding {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  color: #FFF;
  background: #4BADD9;
}

.menu-example { position: relative; }

.menu-example__item {
  position: relative;
  z-index: 3;
}

3. Include both jQuery library and the jQuery SlidingMenu plugin's script at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="SlidingMenu.js"></script>

4. Active the sliding menu indicator in the JavaScript as this:

var $menu = $('.example');
var $items = $menu.find('.menu-example__item');
new SlidingMenu({
  'menu': $menu,
  'items': $items
});

5. Possible plugin options.

new SlidingMenu({
    'itemActiveClass': 'active',
    'slidingClass': '',
    'duration': 400,
    'direction': 'x',
    'menu': $menu,
    'items': $items
});

6. Apply your own CSS styles to the sliding menu indicator.

.menu-example {
  background: #41596D;
  margin: 20px auto;
}

.menu-example ul { overflow: hidden; }

.menu-example li { float: left; }

.menu-example__item {
  padding: 22px;
  display: block;
  text-decoration: none;
  font-size: 18px;
  line-height: 20px;
  color: #E0EAEB;
}

.menu-example__item.active, .menu-example__item:hover { color: #FFF; 

7. Available callback functions which will be fired as you hover/leave the menu item.

new SlidingMenu({
    'itemActiveClass': 'active',
    'slidingClass': '',
    'duration': 400,
    'direction': 'x',
    'menu': $menu,
    'items': $items
},{
    'over': function(){},
    'leave': function(){}
});

---

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