代码改变世界

两级导航栏联动效果

2012-01-13 18:33  PHP淮北  阅读(3304)  评论(0)  编辑  收藏  举报

实现导航栏联动效果

<!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" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="http://i01.cztv.com/xlty/images/style_sport.css" rel="stylesheet" type="text/css" />
<script src=" http://www.cztv.com/funs/uibase/jquery.js" type="text/javascript"></script>
<script language="javascript" src=" http://www.cztv.com/uibase/tvieplayer.js"></script>

</head>
<body>

<div class="header">
  <div class="header_box">
  
	
    <div class="menu"  style="position:relative;">
      <ul class="overflow">
<li><a href="" title="首页" style="cursor:pointer" target="_self">首页</a></li>

<li><a href="" title="赛事集锦"  style="cursor:pointer" target="_self">赛事集锦</a></li>
<li><a href="" title="专题聚焦"  style="cursor:pointer" target="_self">专题聚焦</a></li>
<li><a href="" title="体彩赢家"  style="cursor:pointer" target="_self">体彩赢家</a></li>
<li><a href="" title="现场直击"  style="cursor:pointer" target="_self">现场直击</a></li>
<li><a href="" title="运动汇"  style="cursor:pointer" target="_self">运动汇</a></li>

  <li class="last"><a href="http://sport.cztv.com/" title="开播祝贺">开播祝贺</a></li>
              </ul>
    </div>

       
    							<!--二级导航-->
     <div class="s_menu" style="position:absolute; top:70px;display:none;float:left;">
	 
<span style="" >													
		<a href="" target="_blank">绿茵赛场</a><a href="" target="_blank" title="篮球公园">篮球公园</a><a href="" target="_blank" title="游戏天下">游戏天下</a>		</span>
<span style="display:none" >													
		<a href="" target="_blank">十佳运动员</a><a href="" target="_blank" title="第八届残疾人运动会">第八届残疾人运动会</a>		</span>
<span style="display:none" >													
		<a href="" target="_blank">玩转竞彩</a><a href="" target="_blank" title="赢在乐透">赢在乐透</a>		</span>

<span style="display:none" >													
		<a href="" target="_blank">浙江体育新闻</a><a href="" target="_blank" title="面对面">面对面</a><a href="" target="_blank" title="快递速览">快递速览</a>		</span>
<span style="display:none" >													
		<a href="" target="_blank">给你好看</a><a href="" target="_blank" title="健身地带">健身地带</a>		</span>
<span style="display:none" >													
				</span>

	 
	 </div>       

  </div>

</div>
<script type="text/javascript">

$(document).ready(function(){
 
  $('.menu>ul>li:gt(0):lt(5)').hover(function(){
		//一级导航
		$('.menu').css('position','relative')
		$('.menu>ul>li>a').removeClass('on');
		$(this).find('a').addClass('on');//需要显示导航
		
		//二级导航	
		$('.s_menu').css('display','block');
		$('.s_menu>span').css('display','none');
		$('.s_menu>span').eq($('.menu>ul>li').index($(this))-1).css('display','block');
		
		//计算偏移量
		var num = $('.menu>ul>li').index($(this))-1;
		var menuleft1 = $(this).offset().left;//一级导航左侧
		var menuleft3 = $(this).innerWidth(); //一级模块自身长度
		var menuleft2 = $('.s_menu>span').eq($('.menu>ul>li').index($(this))-1).innerWidth(); //二级模块自身长度
		
		var numleft = menuleft1+menuleft3/2-menuleft2/2;//二级导航左侧偏移量 50指一级导航长度
		
		
		$('.s_menu').css('left',''+numleft+'px');
		
		//$('#test').html(menuleft1+'--'+menuleft2+'--'+numleft+'--'+num+'--'+$('.s_menu>span').eq(num).html());
		
	},
	 function () {
		$('.s_menu').css('display','none');//鼠标离开全部隐藏
  }

	
	
	);
});
	
	</script>
	 
 

 

QQ截图20120113175846

 

 

设计知识点:

  1. 一级导航A和二级导航B是分别的div，A要定义position:relative相对定位，B要定义position:absolute绝对定位（偏移量从body算起）
  2. $('.menu>ul>li:gt(0):lt(5)')表示1-5个li元素，gt大于某数，lt小于某个数
  3. offset()计算位置的偏移量返回：top 和 left。此方法只对可见元素有效。--这个方法真好。
  4. 计算自身模块长度innerWidth()，

    此方法对可见和隐藏元素均有效。注意：只对overflow:hidden;这种隐藏方式有效，对dispaly：none无效，本文是先执行$('.s_menu').css('display','block');然后在计算他的长度，否则的话第一次计算总是为0，切忌

     

    实现效果：二级导航跟随一级导航变化，且二级导航的和一级模块的中心轴对齐，本文只是写了左右联动，当然高度联动也是可以实现的。

引申：

CSS隐藏内容的三种方法

1.display:none;

2. visibility: hidden ;
这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间。

3.overflow:hidden;是比较合理的方法

.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }

就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

innerWidth()只对第三种有效，前两种都无效。

Technorati 标签: 导航栏联动,jquery,innerwith