Easy Customizable Sliding Menu Indicator Plugin - SlidingMenu
File Size: | 10.1 KB |
---|---|
Views Total: | 3137 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.