您的位置:首页> 日志> 前端技术 正文
DTOP

水平子导航居中脚本

laomao800 | 2012年01月06日 |

>>收藏本文 已有 2条评论

* 子导航效果

* 源代码

----------------------------------------------------------------------------

上面是一个项目内的子导航效果,因为水平导航的特殊性故采用了绝对定位并设置left值来进行定位。

但是采用这种方法,如果后期需要对模板进行多个站的套用、子导航数量变更,则相应的必须修改对应的坐标才可实现,维护难度较高。

 

根据分析导航的分布只会有上图3种情况(子导航宽度小于父导航宽度)

因此可以使用简单的脚本对坐标进行判断,计算出居中时left值的大小,则避免了各种麻烦。。。

----------------------------------------------------------------------------

* HTML代码片段

<div class="topNav">
	<ul>
		<li class="current"><a href="">网站首页</a></li>
		<li><a href="">新闻中心</a>
			<div class="sub">
				<a href="">时政要闻2</a> | 
				<a href="">部门资讯</a> | 
				<a href="">乡镇动态</a> | 
				<a href="">视频新闻</a> | 
				<a href="">八面来风</a>
			</div>
		</li>
		<li><a href="">政务公开</a>
			<div class="sub">
				<a href="">时政要闻3</a> | 
				<a href="">部门资讯</a> | 
				<a href="">乡镇动态</a> | 
				<a href="">视频新闻</a> | 
				<a href="">乡镇动态</a> | 
				<a href="">视频新闻</a> | 
				<a href="">八面来风</a>
			</div>
		</li>
		<!-- 省略... -->
	</ul>
</div>

 

* CSS代码片段

.topNav { position: relative; z-index: 1; }
.topNav ul { border: #FACE9A 1px solid; height: 37px; line-height: 37px; overflow: hidden; }
.topNav li { float: left; width: 90px; margin: 0 10px; display: inline; text-align: center; }
.topNav li a { color: #FFF; text-decoration: none; font-size: 14px; font-weight: bold; display: block; }
.topNav li.current a,
.topNav li a:hover { color: #fcff00; }
.topNav li .sub { position: absolute; z-index: 2; top: 40px; height: 30px; line-height: 30px; white-space: nowrap; display: none; }
.topNav li .sub a { display: inline; font-size: 12px; color: #333; font-weight: normal; margin: 0 10px; }
.topNav li.current .sub { display: block; }

 

* JS代码片段

jQuery(function($){
	$(".topNav li").hover(function(e){
		setLeft($(this));
		$(this).addClass("current").siblings().removeClass("current");
	}).filter(".current").each(function(){
		setLeft($(this));
	});
	
	function setLeft(obj) {
		var pw  = obj.parent().width(),
			sub = obj.find(".sub"),
			pos = obj.position(),
			padding = 15;
		if( sub.length ){
			if( (sub.width()/2-width(obj)/2) > (pos.left-padding) ){
				sub.css("left", padding + "px");
			}else if( (pos.left + (sub.width()/2+width(obj)/2)) > (pw-padding) ){
				sub.css("right", padding + "px");
			}else{
				sub.css("left", pos.left - (sub.width()/2-width(obj)/2));
			}
			sub.show().parent().siblings().find(".sub").hide();
		}
	}
	function css(el, prop) {
		return parseInt($.css(el[0], prop)) || 0;
	};
	function width(el) {
		return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
	};
})

 

* 简易DEMO

点击下载

 

---------------------

ps...smiley@kevinsheep  提醒~若二级菜单超出总父导航宽度的情况,可以设置子导航宽度为定宽,调整内部栏目换行什么什么的~~~不作演示~(逃