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>jQuery触发式二级导航</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background: url(images/body_bg.png) repeat-x;}
.container{width:960px;padding:0;margin:0 auto;}
/* topnav */
ul#topnav{margin:179px 0 0 0;padding:0;float:left;width:100%;list-style:none;font-size:1.1em;}
ul#topnav li{float:left;margin:0;padding:0;position:relative;}
ul#topnav li a{float:left;text-indent:-9999px;height:44px;}
ul#topnav li:hover a, ul#topnav li a:hover{ background-position:left bottom;}
ul#topnav a.home{background:url(images/nav_home.png) no-repeat;width:78px;}
ul#topnav a.products{background:url(images/nav_products.png) no-repeat;width:117px;}
ul#topnav a.sale{background:url(images/nav_sale.png) no-repeat;width:124px;}
ul#topnav a.community{background:url(images/nav_community.png) no-repeat;width:124px;}
ul#topnav a.store{background:url(images/nav_store.png) no-repeat;width:141px;}
ul#topnav li .sub{
	display:none;position:absolute;top:44px;left:0;background:#344c00 url(images/sub_bg.png) repeat-x;padding:20px 20px 20px;float:left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright:5px;
	-khtml-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft:5px;
	-khtml-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
}
ul#topnav li .row{clear:both;float:left;width:100%;margin-bottom:10px;}
ul#topnav li .sub ul{list-style:none;margin:0;padding:0;width:150px;float:left;}
ul#topnav .sub ul li{width:100%;color:#fff;}
ul#topnav .sub ul li h2{padding:0; margin:0;font-size:1.3em;font-weight:normal;}
ul#topnav .sub ul li h2 a{padding:5px 0;background-image:none;color:#e8e000;}
ul#topnav .sub ul li a{float:none;text-indent:0;height:auto;background:url(images/navlist_arrow.png) no-repeat 5px 12px;padding:7px 5px 7px 15px;display:block;text-decoration:none;color:#fff;}
ul#topnav .sub ul li a:hover{color:#ddd;background-position:5px 12px;}
</style>

</head>

<body>

<div class="container">
	<ul id="topnav">
		<li><a href="http://www.baidu.com/" class="home">Home</a></li>
		<li>
			<a href="http://www.baidu.com/" class="products">Products</a>
			<div class="sub">
				<ul>
					<li><h2><a href="http://www.zcool.com.cn/">标题</a></h2></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
				</ul>
				<ul>
					<li><h2><a href="http://www.zcool.com.cn/works/">原创作品</a></h2></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
				</ul>
				<ul>
					<li><h2><a href="http://www.baidu.com/">Accessories</a></h2></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
				</ul>
				<ul>
					<li><h2><a href="http://www.baidu.com/">Accessories</a></h2></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					<li><a href="http://www.baidu.com/">Navigation Link</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="http://www.baidu.com/" class="sale">Sale</a>
			<div class="sub">
				<div class="row">
					<ul style="width:225px;">
						<li><h2><a href="http://www.baidu.com/">Deal of the 
						Week</a></h2></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
					</ul>
					<ul style="width:225px;">
						<li><h2><a href="http://www.baidu.com/">Clearance 
						Items</a></h2></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link - 
						2 Column</a></li>
					</ul>
				</div>
				<div class="row">
					<ul>
						<li><h2><a href="http://www.baidu.com/">Deal of the 
						Week</a></h2></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					</ul>
					<ul>
						<li><h2><a href="http://www.baidu.com/">Clearance 
						Items</a></h2></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					</ul>
					<ul>
						<li><h2><a href="http://www.baidu.com/">Open Box Items</a></h2></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
						<li><a href="http://www.baidu.com/">Navigation Link</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li><a href="http://www.baidu.com/" class="community">Community</a></li>
		<li><a href="http://www.baidu.com/" class="store">Store Locator</a></li>
	</ul>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	function megaHoverOver(){
		
		$(this).find(".sub").stop().fadeTo('fast', 1).show();
		
		//计算宽度的ul的
		(function($) { 
			jQuery.fn.calcSubWidth = function() {
				rowWidth = 0;
				//计算行
				$(this).find("ul").each(function(){					
					rowWidth += $(this).width(); 
				});	
			};
		})(jQuery); 

		if($(this).find(".row").length > 0){
			var biggestRow = 0;	
			//计算每一行
			$(this).find(".row").each(function(){							   
				$(this).calcSubWidth();
				//找到最大的行
				if(rowWidth > biggestRow){
					biggestRow = rowWidth;
				}
			});
			//设置宽度
			$(this).find(".sub").css({'width' :biggestRow});
			$(this).find(".row:last").css({'margin':'0'});
		}else{
			$(this).calcSubWidth();
			//设置宽度
			$(this).find(".sub").css({'width' : rowWidth});
		}
	}

	function megaHoverOut(){ 
		$(this).find(".sub").stop().fadeTo('fast', 0, function(){
			$(this).hide(); 
		});
	}

	var config = {    
		sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
		interval: 100, // number = milliseconds for onMouseOver polling interval    
		over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
		timeout: 500, // number = milliseconds delay before onMouseOut    
		out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
	};

	$("ul#topnav li .sub").css({'opacity':'0'});
	$("ul#topnav li").hoverIntent(config);

});
</script>
</body>
</html>

JS代码(jquery.hoverIntent.minified.js):

/*** hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+* <http://cherne.net/brian/resources/jquery.hoverIntent.html>** @param f onMouseOver function || An object with configuration options* @param g onMouseOut function || Nothing (use configuration options object)* @author Brian Cherne <brian@cherne.net>*/
(function($){
	$.fn.hoverIntent=function(f,g){
	var cfg={
	sensitivity:7,interval:100,timeout:0}
;
	cfg=$.extend(cfg,g?{
	over:f,out:g}
:f);
	var cX,cY,pX,pY;
	var track=function(ev){
	cX=ev.pageX;
	cY=ev.pageY;
}
;
	var compare=function(ev,ob){
	ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
	if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){
	$(ob).unbind("mousemove",track);
	ob.hoverIntent_s=1;
	return cfg.over.apply(ob,[ev]);
}
else{
	pX=cX;
	pY=cY;
	ob.hoverIntent_t=setTimeout(function(){
	compare(ev,ob);
}
,cfg.interval);
}
}
;
	var delay=function(ev,ob){
	ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
	ob.hoverIntent_s=0;
	return cfg.out.apply(ob,[ev]);
}
;
	var handleHover=function(e){
	var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;
	while(p&&p!=this){
	try{
	p=p.parentNode;
}
catch(e){
	p=this;
}
}
if(p==this){
	return false;
}
var ev=jQuery.extend({
}
,e);
	var ob=this;
	if(ob.hoverIntent_t){
	ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);
}
if(e.type=="mouseover"){
	pX=ev.pageX;
	pY=ev.pageY;
	$(ob).bind("mousemove",track);
	if(ob.hoverIntent_s!=1){
	ob.hoverIntent_t=setTimeout(function(){
	compare(ev,ob);
}
,cfg.interval);
}
}
else{
	$(ob).unbind("mousemove",track);
	if(ob.hoverIntent_s==1){
	ob.hoverIntent_t=setTimeout(function(){
	delay(ev,ob);
}
,cfg.timeout);
}
}
}
;
	return this.mouseover(handleHover).mouseout(handleHover);
}
;
}
)(jQuery);

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