实现导航栏联动效果

    
    
    
    
    
    
  
     
  	    
      
      
       
        
首页
        
赛事集锦
        
专题聚焦
        
体彩赢家
        
现场直击
        
运动汇
  
        
开播祝贺
              
       
    
      
           							
           
      
	 
       															绿茵赛场篮球公园游戏天下		
       															十佳运动员第八届残疾人运动会		
       															玩转竞彩赢在乐透		
       															浙江体育新闻面对面快递速览		
       															给你好看健身地带		
       																		 	 
      
         
     
    

 

 

 

设计知识点:

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 标签: , ,