jQuery流畅黑色导航效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery流畅黑色导航效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide menu with jQuery and CSS</title>
<link href="css/style.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mainmenuslide.js"></script>
<script type="text/javascript">
        $(function() {
            $("ul").mainmenuslide({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>
</head>
<body>
<div id="header">
    <div class="header_navigation">
    	<ul class="mainmenuslide">
        	<li><a href="#" alt="">Home</a></li>
            <li><a href="#" alt="">Portafolio</a></li>
            <li><a href="#" alt"">Services</a></li>
            <li><a href="#" alt"">Blog</a></li>
            <li><a href="#" alt"">Contact</a></li>
        </ul>
    </div><!-- end header_navigation-->
</div><!-- end header -->
<div id="footer"></div><!-- End footer-->
</body>
</html>

JS代码(jquery.mainmenuslide.js):

(function($){
	$.fn.mainmenuslide=function(o){
	o=$.extend({
	fx:"linear",speed:500,click:function(){
}
}
,o||{
}
);
	return this.each(function(){
	var b=$(this),noop=function(){
}
,$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];
	$li.not(".back").hover(function(){
	move(this)}
,noop);
	$(this).hover(noop,function(){
	move(curr)}
);
	$li.click(function(e){
	setCurr(this);
	return o.click.apply(this,[e,this])}
);
	setCurr(curr);
	function setCurr(a){
	$back.css({
	"left":a.offsetLeft+"px","width":a.offsetWidth+"px"}
);
	curr=a}
;
	function move(a){
	$back.each(function(){
	$(this).dequeue()}
).animate({
	width:a.offsetWidth,left:a.offsetLeft}
,o.speed,o.fx)}
}
)}
}
)(jQuery);

CSS代码(main.css):

.mainmenuslide{height:29px;width:550px;background:url("../img/background_main.png") no-repeat top;position:relative;padding:15px 0 15px 0;margin:0 -10px 0;}
.mainmenuslide li{padding:16px 0 11px 25px;margin:-18px 0 0 9px;float:left;list-style:none;}
.mainmenuslide li.back{background:url("../img/hover_main.png") no-repeat right -52px;width:9px;height:30px;padding:0px 0 22px 0;z-index:1;margin:-12px 0 0 8px;position:absolute;}
.mainmenuslide li.back .left{background:url("../img/hover_main.png") no-repeat top left;padding:0px 0 22px 0;height:30px;margin-right:24px;}
.mainmenuslide li a{font:bold 14px arial;top:7px;z-index:2;float:left;height:30px;position:relative;margin:auto 10px;outline:none;}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
/**** Body ***/
body{background:#aedae9;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;line-height:normal;color:#FFF;margin:0;}
/**** Links ***/
a{text-decoration:none;color:#FFF;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
/**** Header ***/
#header{background:url(../img/background_header.png) no-repeat;width:1000px;height:108px;margin:auto;}
.header_navigation{float:right;width:550px;height:24px;margin:24px 0 0 0;}
/**** content ***/
#content{width:940px;margin:auto;border-left:1px solid gray;border-bottom:1px solid gray;border-right:1px solid gray;padding:30px;min-height:500px;}
/**** Footer ***/
#footer{width:1000px;margin:auto;}

附件:下载该文件资源,减少时间成本(增值服务)