Animated Menu Item Indicator With jQuery - sliderMenu
File Size: | 4.37 KB |
---|---|
Views Total: | 3293 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.