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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_qFmHtFW99LM_gGX15F-I1reaRYByPHa0FqomiUwxXz2aMJ_Aq7Y8kKNiCsOyzQ4wsN6Q7vqb3N8dxLYUFB7ymCFxHVzRKubQ7iDe6vt7WADiCsNNnHgKOvi4aptQFXnm8e0vtHfYq0/)
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
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
Now you will see a beautiful horizontal sliding navigation menu on your site.If you face any problem or you like this please comment :)
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() {
$('.kwicks').kwicks({
max : 200,
duration: 800,
easing: 'easeOutQuint'
});
});
</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: "Lucida Grande", "Lucida Sans Unicode", 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: "Lucida Grande", "Lucida Sans Unicode", 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 :)
Wonderful. simply amazing. Loved your tutorial. Installing it on my blog now. Do check out after a day or two.
ReplyDeleteThanks Jaky Astik for your comment i will definitely visit your site to see your work :)
ReplyDeleteGood Luck !
Thanks
ReplyDeletehttp://www.cinfilm.com
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?
ReplyDeleteThis works great. Can you post a way to customize your code? I would like to modify it to fit my blog better. Thanks.
ReplyDeletethank's for info
ReplyDeleteHola, very good!!
ReplyDeleteAbrazo desde Uruguay.