Simple jQuery Navigation Menu Slider - menuSlider

File Size: 3.91KB
Views Total: 1231
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Navigation Menu Slider - menuSlider

menuSlider is a simple jQuery plugin that allows you to create a smooth slider on the navigation menu. Good for indicating which item of the menu your visitor is hovering over.

Basic Usage:

1. Create a html menu

<div id="demo">
<li id="selected">One</li>

2. Sample CSS for the menu

#slideContainer {
width: 60%;
height: 30px;
margin: auto;
position: relative;
top: -10px;
ul {
position: relative;
width: 100%;
height: 100%;
margin: auto;
list-style-type: none;
padding: 0;
font-size: 0;
ul li {
display: block;
padding: 0;
float: left;
width: 25%;
margin: 0;
font-size: 1rem;
text-align: center;
background-color: #6B7CB3;
cursor: pointer;
height: 100%;

3. Include jQuery library and jQuery menuSlider plugin on the webpage

<script src=""></script>
<script src="jquery.menuSlider.js"></script>

4. The javascript


Change Log:

v1.2.5 (2013-07-09)

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