Add Red Sliding Horizontal Menu with jQuery

Add Red Sliding Horizontal Menu with jQuery | https://tipsandtricksfor.blogspot.com/2011/05/add-red-sliding-horizontal-menu-with_16.html

Maybe in your blog you're using normal horizontal menu. But, have you try sliding horizontal menu? This horizontal menu is very nice with a little jQuery touch. When you put your cursor on this horizontal menu, the menu will slide and the color is change from red to white. Not understand? OK, try the DEMO. Interested? Just follow the steps below to Add Red Sliding Horizontal Menu with jQuery into your blog.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzcrGSpMsRu35KV9w917MVvBqNn5-hkO6VU0AdFywPzqoUzaM1LpuBNULVjcbsplBmaStwmg3668FJHssUYW1jo0LGzOqAy613MC4nxxl39Hr-xkxpRVLmMTIV1TjjvUInbWRfcF6FlE/) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzcrGSpMsRu35KV9w917MVvBqNn5-hkO6VU0AdFywPzqoUzaM1LpuBNULVjcbsplBmaStwmg3668FJHssUYW1jo0LGzOqAy613MC4nxxl39Hr-xkxpRVLmMTIV1TjjvUInbWRfcF6FlE/) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

4. Click SAVE TEMPLATE
5. Now add the code below, to use red sliding horizontal menu
[Design --> Page Elements --> Add Gadget, choose "HTML/Java Script"]

<div class="container">

<ul id="topnav" class="v2">
<center>
<li><a rel="nofollow" href="#">Home</a></li>
<li><a rel="nofollow" href="#">TOC</a></li>
<li><a rel="nofollow" href="#">Widgets</a></li>
<li><a rel="nofollow" href="#">Templates</a></li>
<li><a rel="nofollow" href="#">jQuery</a></li>
<li><a rel="nofollow" href="#">Advertise</a></li>
<li><a rel="nofollow" href="#">Contact</a></li>
</center>
</ul>

</div>

6. Before you click SAVE, don't forget to customize the links

Loading Related Posts