Welcome, Old Sport!

一款活动效果的导航

by ilikecss ON 2010/07/27 4911

最近看到一个不错的导航效果,把 CSS 和 JS 都做了处理,现在和大家一起分享这个效果的导航。
*请点击 VIEW DEMO 来查看演示效果*

Step1. 创建HTML

<ul id="topnav" class="v2">
    <li class="home"><span>Home</span><a href="http://ilikecss.com/" target="_blank">Home</a></li>
    <li class="Portfolio"><a href="http://sunflowamedia.com/portfolio/" target="_blank">Portfolio</a></li>
    <li class="About"><a href="http://sunflowamedia.com/about/" target="_blank">About</a></li>
    <li class="Blog"><a href="http://sunflowamedia.blog.163.com/" target="_blank">Blog</a></li>
    <li class="Contact"><a href="mailto:airoschou@sunflowamedia.com" target="_blank">Contact</a></li>
    <li class="Rss"><a href="http://feed.feedsky.com/airoschou" target="_blank">Rss</a></li>
</ul>

Step2. 创建CSS

ul#topnav {
	 margin: 15px 0 50px 0;
	 padding: 0;
	 list-style: none;
	 float: left;
	 font-size: 1.1em;
}
ul#topnav li {
	 margin: 0;
	 padding: 0;
	 overflow: hidden;  
	 float: left;
	 height: 40px;
}
ul#topnav li.home {
     width: 75px;
}
ul#topnav li.Rss {
     width: 80px;
}
ul#topnav li.Portfolio {
     width: 105px;
}
ul#topnav li.Blog {
     width: 75px;
}
ul#topnav li.About {
     width: 80px;
}
ul#topnav li.Contact {
     width: 95px;
}
ul#topnav a, ul#topnav span {
	 padding: 10px 20px;
	 float: left;
	 text-decoration: none;
	 color: #fff;
	 background: url(a_bg.gif) repeat-x;
	 text-transform: uppercase;
	 clear: both;
	 width: 100%;
	 height: 20px;
	 line-height: 20px; 
}
ul#topnav a{ 
	 color: #555;
	 background-position: left bottom;
}
ul#topnav span { 
	 background-position: left top;
}
ul#topnav.v2 span {
     background: transparent url(../images/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a {
     background: transparent url(../images/a_bg.gif) repeat-x left bottom;
	 color: #555;
}

Step3. 插入jQuery和脚本包

$(document).ready(function() {
	$("#topnav li").prepend("<span></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 type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
2条评论
  1. #1

    Betty说道:

    最近在做一个首页中的轮播banner,自己不会写,就到处找例子改。后来改完又有bug,还要再补。
    绝望中扒拉出lz的博客,抱走好多东西,感觉不留个言不太地道。
    真心谢谢~lz辛苦啦




TOP