Animated Horizontal Sliding Navigation Menu With Images Using jQuery For Blogger

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately after it, paste this code:

<script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/Source%285%29%5CSource/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;.kwicks&#39;).kwicks({
max : 200,
duration: 800,
easing: &#39;easeOutQuint&#39;
});
});
</script>

<style media='screen' type='text/css'>

div.kwicks_container {
width: 840px;
margin: 100px auto 0 auto;
}
/*-------------------------KWICKS--------------------*/
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
width:840px;
height:50px;
z-index:2;
}
.kwicks li {
display: block;
float: left;
overflow: hidden;
padding: 0;
cursor: pointer;
width: 100px;
height: 35px;
z-index:2;
cursor:pointer;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FF9933;
}
.kwicks li a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnjHXEkec3cF3fqVGvFjzVQS7V0gDcIYwQncownIkc0WgufppIOGs2s8Nm4qFiM0U0GEYxJdwGZtLV4mui75KxsFl1EG3D80WgIKZFfkPEO8kgxzQa0bSc_EBb1K7WV0SRO2lhTxthr4wK/);
background-repeat:no-repeat;
font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial;
font-size: 14px;
letter-spacing: -0.07em;
color: #AA0000;
height: 40px;
outline:none;
display:block;
z-index:100;
cursor:pointer;
text-transform: uppercase;
font-weight: bold;
margin-top: -3px;
margin-left: 5px;
text-decoration: none;
}
.kwicks li h3 {
position: absolute;
width: 120px;
font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial;
font-size: 10px;
color: #FF6600;
letter-spacing: -0.02em;
outline:none;
z-index:0;
cursor:pointer;
text-transform: uppercase;
font-weight: normal;
margin-left: 5px;
text-decoration: none;
left: 0px;
top: 15px;
right: 0px;
bottom: 0px;
}
#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 {
margin: 0pt;
overflow: hidden;
position: absolute;
display: block;
width: 120px;
}
#kwick_1 {
left: 0px;
border: none;
}
#kwick_2 {
left: 120px;
}
#kwick_3 {
left: 240px;
}
#kwick_4 {
left: 360px;
}
#kwick_5 {
left: 480px;
}
#kwick_6 {
left: 600px;
}
#kwick_7 {
right: 0px;
}
#kwick_1 a {
background-position:0px 0px;
}
.kwicks a:hover, .kwicks #active {
color: #3399FF;
}
.kwicks li a:hover h3, .kwicks li #active h3 {
color: #999999;
}
#kwick_2 a {
background-position:0px -50px;
}
#kwick_3 a {
background-position:0px -192px;
}
#kwick_4 a {
background-position:0px -100px;
}
#kwick_5 a {
background-position:0px -150px;
}
#kwick_6 a {
background-position:0px -250px;
}
#kwick_7 a {
background-position:0px -300px;
}
</style>

Now click Save Template

STEP #3 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

<div class="kwicks_container">

<ul class="kwicks">
<li id="kwick_1">
<a href="#">Home
<h3>Front page</h3>
</a>
</li>
<li id="kwick_2">
<a href="#">CSS & XHTML
<h3>Makeup web page</h3>

</a>
</li>
<li id="kwick_3">
<a href="#">Java
<h3>Learning Java</h3>
</a>
</li>
<li id="kwick_4">
<a href="#">Others
<h3>In the other hand</h3>

</a>
</li>
<li id="kwick_5">
<a href="#">PHP
<h3>PHP Programming</h3>
</a>
</li>
<li id="kwick_6">
<a href="#">Resources
<h3>Resources for Web Developers</h3>

</a>
</li>
<li id="kwick_7">
<a href="#">Themes
<h3>Bloggers - Wordpress Themes</h3>
</a>
</li>
</ul>
</div>
Now click Save