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>