nice drop down menu
Share
</b:if>
<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:30px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #111;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #ffffff;
}
ul#topnav a { color: #111111; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFab4enKuEJJx71katr3U06-2JP724sshGgpAAM9acPrldrcYD_zCMEO64ol3_bjVHCRu1TsgWB9RKEsw8s_8wqkP0jrt88c5-8C5roxinCnyV9NsS8r5-3cPaGTjJ4Fi3yjE3UZhmD0k/) repeat-x left top;
}
ul#topnav.v2 a{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFab4enKuEJJx71katr3U06-2JP724sshGgpAAM9acPrldrcYD_zCMEO64ol3_bjVHCRu1TsgWB9RKEsw8s_8wqkP0jrt88c5-8C5roxinCnyV9NsS8r5-3cPaGTjJ4Fi3yjE3UZhmD0k/) 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() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
</head>
<body>
dan ni
<div class='container'>
<ul id='topnav'>
<li><a href='http://blo-temp.blogspot.com/'>Home</a></li>
<li><a href='http://blo-temp.blogspot.com/search?max-results=999'>TOC</a></li>
<li><a href='http://blo-temp.blogspot.com//search/label/widget?max-results=1000'>Widgets</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/Templates?max-results=1000'>Templates</a></li>
<li><a href='http://blo-temp.blogspot.com//search/label/jQuery?max-results=1000'>jQuery</a></li>
<li><a href='http://blo-temp.blogspot.com/'>Advertise</a></li>
<li><a href='http://blo-temp.blogspot.com/contact-me.html'>Contact</a></li>
</ul>
</div>
<div class='container'>
<ul id='topnav'>
<li><a href='http://blo-temp.blogspot.com/'>Home</a></li>
<li><a href='http://blo-temp.blogspot.com/search?max-results=999'>TOC</a></li>
<li><a href='http://blo-temp.blogspot.com//search/label/widget?max-results=1000'>Widgets</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/blogger templates?max-results=1000'>Templates</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/jQuery?max-results=1000'>jQuery</a></li>
<li><a href='http://blo-temp.blogspot.com/search/label/seo-and-meta-tag.html/'>seo and meta tag</a></li>
<li><a href='http://blo-temp.blogspot.com/contact-me.html'>Contact</a></li>
</ul>
</div>
<div id='content-wrapper'>
<div id='side-wrapper1'>
Labels: Add Navigate Bar on blogger templates, drop down menu, offline seo
0 Comments for blog template :
Post a Comment
blog template: nice drop down menu