Animated Horizontal Sliding Navigation Menu With Images Using jQuery For Blogger

One of the best Sliding Horizontal Navigation Menu i have ever seen.It is so smooth to navigate.I myself played with it for about 10 minutes before clicking the link.It will make your blog more playable and sticky :) .And yes how i can forgot it also have images which also add more charm to it. Just view its demo below .Then its simple Installation.

View Demo






Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!
  

Installation :


Step 1:

Javascript + CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML

Now Find ]]></b:skin> Then Replace it with Below Code

]]></b:skin>

<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/AVvXsEjKlDZkbFqb0Pf1TDdH3NlvytK3tPfezZ8SLZgviF6hTYGK3HwZ1J-Gr_oFXWacr75HQhotzDW9oYFUYXFuxlcrxCmnd5JDFjD-CVwwQhgfFU5m5V0lXumy9ZLDEhT2ZxGyH_HYEZMGtc3W/);
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>

Then Save Template!




Step 2:

HTML


Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE

<div class="kwicks_container">

<ul class="kwicks">
<li id="kwick_1">
  <a href="http://aext.net/">Home
      <h3>Front page</h3>
</a>
</li>
<li id="kwick_2">
  <a href="http://aext.net/category/css/">CSS & XHTML
      <h3>Makeup web page</h3>

</a>
</li>
<li id="kwick_3">
  <a href="http://aext.net/category/java/">Java
      <h3>Learning Java</h3>
</a>
</li>
<li id="kwick_4">
  <a href="http://aext.net/category/others">Others
      <h3>In the other hand</h3>

</a>
</li>
<li id="kwick_5">
  <a href="http://aext.net/category/php/">PHP
      <h3>PHP Programming</h3>
</a>
</li>
<li id="kwick_6">
  <a href="http://aext.net/category/resources/">Resources
      <h3>Resources for Web Developers</h3>

</a>
</li>
<li id="kwick_7">
  <a href="http://aext.net/category/theme-layout/">Themes
      <h3>Bloggers - Wordpress Themes</h3>
</a>
</li>
</ul>
</div>

Now you will see a beautiful horizontal sliding navigation menu on your site.If you face any problem or you like this please comment :)