Welcome, Old Sport!

像魔术一样的弹簧导航效果 CSS & jQuery

by ilikecss ON 2011/02/23 8434

其实这个导航效果我在很早以前就看到过了,那时我也只是初学者,完全不懂如何制作出此效果,现在故地重游,我已将效果重新整理,分享给大家。注意这个导航可以有暂停效果,选取和文字颜色都可以根据自己网站来自由配色。class=”current”就是当前选择页面,大家可以自己灵活运用。

Step1. 创建HTML

<div class="nav-wrap">   
<ul class="group" id="example">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">About me</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">CSS/HTML</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>

Step2. 创建CSS

.nav-wrap { 
	margin: 50px auto;  
	background-color: #121212; 
	border-top: 1px solid #FFF; 
	border-bottom: 1px solid #FFF; 
}
.group:after { 
	visibility: hidden; 
	display: block; 
	font-size: 0; 
	content: " "; 
	clear: both; 
	height: 0; 
}
*:first-child+html .group { zoom: 1; } /* IE7 */
#example { 
	width: 960px; 
	margin: 0 auto; 
	list-style: none; 
	position: relative; 
}
#example li { display: inline; }
#example li a { 
	position: relative; 
	z-index: 200; 
	color: #AAA; 
	font-size: 14px; 
	display: block; 
	float: left; 
	padding: 12px 10px 10px 10px; 
	text-decoration: none; 
	text-transform: uppercase; 
}
#example li a:hover { color: #FFF; }
#example #magic-line-two { 
	width: 100px; 
	position: absolute; 
	top: 0; 
	left: 0; 
	background: #666; 
	z-index: 100; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
}
.current a { color: #FFF !important; }

Step3. 插入jQuery和脚本包

$(function(){
var $el, leftPos, newWidth,
	$mainNav = $("#example");
/*
	EXAMPLE 
*/
$mainNav.append("<li id='magic-line-two'></li>");
var $magicLineTwo = $("#magic-line-two");
$magicLineTwo
	.width($(".current").width())
	.height($mainNav.height())
	.css("left", $(".current a").position().left)
	.data("origLeft", $(".current a").position().left)
	.data("origWidth", $magicLineTwo.width())
	.data("origColor", $(".current a").attr("rel"));
$("#example li").find("a").hover(function() {
	$el = $(this);
	leftPos = $el.position().left;
	newWidth = $el.parent().width();
	$magicLineTwo.stop().animate({
		left: leftPos,
		width: newWidth,
		backgroundColor: $el.attr("rel")
	})
}, function() {
	$magicLineTwo.stop().animate({
		left: $magicLineTwo.data("origLeft"),
		width: $magicLineTwo.data("origWidth"),
		backgroundColor: $magicLineTwo.data("origColor")
	});    
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
4条评论
  1. #1

    gswwjw说道:

    #example #magic-line-two {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: #666;
    z-index: 100;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
    这里的
    top: 0;
    left: 0;
    当图片换成PNG图像,在IE下去掉灰底时,有问题

  2. #2

    Scansaffise说道:

    Nice site




TOP