Add Red Sliding Horizontal Menu with jQuery

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

5 comments:

Good article.I really think what you said is right,in modern society,we have so many troubles,if you feel nothing to relax yourself,I suggest you to play the wow and some other games,and you can come to my page to find more information about http//www.mmolive.com/ andhttp://www.mmohome.com/gold/Maple-Story-US.html

Reply
18/8/12

Regardless of whether you will have a pet or even a pet that isn't properly behaved, you can find strategies to teach your pet and make it easier to live with 1. You can attempt coaching yourself, or sign up your pet dog in a obedience college. Keep in mind ideas in this post if you've received a dog you should train.How To Have A Healthy, Satisfied Being pregnant [url=http://penrithwhitewater.com.au/giftcerts/config.asp]Fake Oakley Sunglasses[/url]
Vitamin B Complex is a superb remedy will aid take care of your hemorrhoids. Unlike other natural vitamins that you would consider by mouth, you must apply b vitamin (crushed power or liquid) right to the affected location with your rear end. This can help you to drastically reduce the size of your hemorrhoids. [url=http://topsteel.com.au/admin/upload_menu.asp]Beats Headphones[/url]
Poinsettia plants and flowers are enjoyed by a lot of families through the entire holidays. However, the majority of people toss the poinsettias away following the holidays. This year, vegetation the poinsettia within your backyard rather than throwing it. Be sure you plant the poinsettia far from streetlights, deck lighting fixtures or any other vibrantly lighted areas. Poinsettias need extended, darkish times to flourish and to be able to blossom up coming wintertime, yet again. [url=http://altag.it/Statistiche/defines.htm]Jordan Scarpe[/url]
We bear in mind hilarious issues. So, if one thing amuses you or maybe you believe it is amusing, you are more inclined to recall it. When you are seeking to commit to memory one thing, produce an entertaining or ridiculous appearance out of anything you are trying to commit to memory and it will be more likely to continue to be in your head. [url=http://iplumb.com.au/common/client.asp]Supra Shoes Melbourne[/url]
Head out with family and friends. One of several most severe things to do when you start getting more aged is to isolate oneself at your residence. Provide you with out once or twice a week for anything: to volunteer, to get lunch or dinner or any one of countless alternatives. Venturing out to see other people features a wonderful result on your psychological health. It's significant on this page you do not permit any professional real estate property package to scare you. Although you can easily go broke on the losing conclusion of the package, adhering to information like what you've read through on this page will ensure that you're constantly being released forward when working in professional house.When You Need To Submit For Personal Bankrupcy [url=http://www.topmania.fr/wp-content/themes/topmania/activate.php]Chaussure Jeremy Scott[/url]

Reply
Anonymous
21/4/13

Post a Comment

:) :( :)) :D =))
Loading Comment Form