Animated Menu Item Indicator With jQuery - sliderMenu

sliderMenu is a jQuery plugin that for displaying a sliding indicator on the top of the menu to tell you which menu item you're hovering on.

See also:

• Pure CSS3 Animated Sliding Menu
• jQuery Plugin For LavaLamp-Like Menu Hover Effect - Lavazi
• jQuery Animated Navigation with Sliding Background - Lava Lamp

How to use it:

1. In this case, we're going to use Font Awesome's arrow icons for the menu indicator.

<link rel="stylesheet" href="font-awesome.min.css">

2. Create a normal menu list as follows:

<ul class="menu">
  <li>
    <i class="fa fa-home"></i>
    <p>Home</p>
  </li>
  <li>
    <i class="fa fa-commenting-o"></i>
    <p>About Us</p>
  </li>
  <li>
    <i class="fa fa-money"></i>
    <p>Offer</p>
  </li>
  <li>
    <i class="fa fa-wrench"></i>
    <p>Services</p>
  </li>
  <li>
    <i class="fa fa-users"></i>
    <p>Team</p>
  </li>
  <li>
    <i class="fa fa-phone"></i>
    <p>Contact</p>
  </li>
    <li>
    <i class="fa fa-wrench"></i>
    <p>Services</p>
  </li>
</ul>

3. The html for the menu indicator.

<span class="line">
  <i class="fa fa-chevron-down"></i>
</span>

4. Put jQuery library and the jQuery sliderMenu plugin right before the closing body tag.

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

5. Call the plugin on document ready.

$(document).ready(function() {
  $('.menu').slideMenu('.line');
});

6. Style and position the menu indicator.

.line { 
  display: block;
  height: 20px;
  left: 20%;
  position: absolute;
  width: 100px;
  top: 0;
  text-align:center;
}

.line i {margin:0 auto;}

---

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