jQuery Menu Slider

jQuery Menu Slider with Left Right Button is useful user interface for website with long horizontal menu, with this Menu user able to scroll the menu with left and right sliders.

 Let us build this jQuery Horizontal Menu Slider with rotatable links inside the menu

Step: 1
Include jQuery Lib and menuSlider Plugin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.menuSlider.js" type="text/javascript"></script>

Step: 2
Add jQuery handler for menuSlider

<script type="text/javascript">

$(document).ready(function(){
 $('#menuSlider').menuSlider({
  width: '500px', // Menu Width
  height: '36px', // Menu Height
  linkSlideCount : 5 // How many Menus scroll back when hit right or lef
  }); 
 });

</script>

Step: 3
menuSlider CSS Styles

<style type="text/css">

#menuSlider ul
{
 display:block;
 position:relative;
 list-style:none;
 padding:0px;
 margin:0px;
 height:36px;
}

#menuSlider ul li
{
 display:block;
 float:left;
 padding:7px;
 height:15px;
 text-align:center;
}

#menuSlider ul li a
{
 text-decoration:none;
 font-weight:bold;
 color:#000;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;

}

#menuSlider ul li a:hover
{
 color:#390;
}

#menuSliderWrapper
{
 position:relative;
 width:1000;
 background:url(images/link_bg.png) repeat-x top;
}

#menuSlider .ls_left_button, #menuSlider .ls_right_button
{
 background:url(images/button_sprit.png) no-repeat 0px 0px;
 width:94px;
 height:36px;
 cursor:pointer;
 clear:both;
}

#menuSlider .ls_right_button
{
 background:url(images/button_sprit.png) no-repeat -94px 0px;
 
}

Step: 4
menuSlider HTML

<div id="menuSlider">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Live Demo

Download Script

Download PSD