.....

7 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/AVvXsEidQL6bP79jOENEVN72074uGsb5XhAEVBDhcJDvoUld3SqnUP_BbQcLJAjLPDNo5Aob9eUW48G3_JWr6HAHBBpOW9swWrXSglfpdabpSXbAaKADJGK8tY74lxMSvg0R-hxrgT27onx3mg3F/);
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




page-elements

Add a Gadget of HTML/JavaScript type.



image
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


Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

7 Responses So Far:

Ice 9 web said...

very interesting post you have here you must be a very good web programmer

Roshan said...

Thanks for such a great compliment….I’m also another learner….

hem said...

Very Interesting scripts magic

sagar_amode said...

too good. ..

fardush said...

thanks

Vivian said...

I love you. i've been trying for days to find a good looking menu for someone as web developer challenged as me. <3

aya said...

Is there a way to edit the images that appear on the side and change the height of the widget? By the way, thank you for this amazing menu, I couldn't figure out how to insert css and js files by myself this is just what I needed :D

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger