Jquery slider menu

The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.

Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
 Your HTML head should look something like this:
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
<script type=’text/javascript’ src=’jquery-1.2.6.min.js’></script>
<script type=’text/javascript’ src=’kwicks.js’></script>
<script type=’text/javascript’ src=’custom.js’></script>
html code paste between Body Tab

<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>

Thats it for the HTML part, now comes the CSS:

.kwicks {  
     list-style: none;  
     position: relative;  
     margin: 0;  
     padding: 0; 
  background-image:url(no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

 }  
 .kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
 float: left;
 width: 125px;
 height: 40px;
 margin-right: 0px;
 background-image:url(kwicks_sprite.jpg);
 background-repeat:no-repeat;
}
.kwicks a{
 display:block;
 height:40px;
 text-indent:-9999px;
 outline:none;
}

#kwick1 {
 background-position:0px 0px;
}
#kwick2 {
 background-position:-200px 0px;
}
#kwick3 {
 background-position:-400px 0px;
}
#kwick4 { 
 background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover { 
 background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
 background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
 background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
 background-position: -600px bottom; 
}

#kwick1 a{
 background-image:url(end.jpg);
 background-repeat:no-repeat;
 background-position: left 0px;
}

#kwick1 a:hover{
 background-position: left -80px;
}

#kwick4 a{
 background-image:url(end.jpg);
 background-repeat:no-repeat;
 background-position: right -40px;
}
#kwick4 a:hover{
 background-position: right -120px;
}

menu Images

See Demo