NOTICE

Adfly Links not working Find Direct Links HERE

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 :)






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(http://1.bp.blogspot.com/_JUJEXEamsyU/SvkE7sIDaeI/AAAAAAAAAzE/Og3KYqRurMU/sprites_menu.png);
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 :)

7 comments :

  1. Wonderful. simply amazing. Loved your tutorial. Installing it on my blog now. Do check out after a day or two.

    ReplyDelete
  2. Thanks Jaky Astik for your comment i will definitely visit your site to see your work :)

    Good Luck !

    ReplyDelete
  3. Thanks
    http://www.cinfilm.com

    ReplyDelete
  4. This works great. The only problem is how do I customize it to fit more with my blog? Is there anyway that you could send me a commented version of the code so that I could modify it to fit my blog?

    ReplyDelete
  5. This works great. Can you post a way to customize your code? I would like to modify it to fit my blog better. Thanks.

    ReplyDelete
  6. Hola, very good!!

    Abrazo desde Uruguay.

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)