网页导航下拉菜单原理

热爱IT 2012-04-11

展开全文

小云童鞋在这和大家先讲下菜单实现原理先，技术大牛呢你应该比我更明白的了，此文送给刚入门的童鞋的，希望对他们有点点帮助。

进入正题：网页菜单经常可以看到，鼠标移动到注菜单上面，会弹出对应的子菜单。先来个效果先：重重的点击我
菜单都是运用“显示和隐藏”，但是当中有一些细节必须要注意。那要注意什么呢？css的定位，这就对了，相对和绝对定位。相对定位是处于标准流的，也就是说占有空间啦，绝对定位是不处于标准流的，你应该明白这吧！所以呢要隐藏的那部分一定要设置绝对定位。听的很模糊吧！没关系下面有例子说的很明白的哦，给些信心。
导航html一般是这样构建的：<ul id=”nav”>
<li> <a href=”#”>下拉菜单1</a>
    <ul>
      <li> <a href=”#”>a1</a></li>
      <li> <a href=”#”>a2</a></li>
    </ul>
</li>
<li> <a href=”#”>下拉菜单2</a>
    <ul>
      <li> <a href=”#”>b1</a></li>
      <li> <a href=”#”>b2</a></li>
    </ul>
</li>
<li> <a href=”#”>下拉菜单3</a>
    <ul>
      <li> <a href=”#”>c1</a></li>
      <li> <a href=”#”>c2</a></li>
    </ul>
</li>
<li> <a href=”#”>下拉菜单4</a>
    <ul>
      <li> <a href=”#”>d1</a></li>
      <li> <a href=”#”>d2</a></li>
    </ul>
</li>
</ul>

这时到CSS书写了，这里先不讲怎样美化导航先，把简单的框架搭建成先。CSS大体是这样：ul{list-style-type:none; padding:0; margin:0;}
ul li{ float:left;}
ul li ul li{float:none;}
ul li a{width:100px; display:block; text-align:center; text-decoration:none;padding:3px 1px; background-color:#ccc;}
ul li ul a{background-color:#eee;}
ul li a:hover{ background-color:#666; color:#fff;}

这时半成品出来了

仔细的你发现CSS有问题那就是定位问题啦？别急，后面会慢慢说，耐心点哦！那我们先把下拉的菜单隐藏先，这时要改CSS了，加上ul li ul{display:none};这行代码就隐藏啦！变成了呵呵……离成功不远了。现在问题就出来了。鼠标移上去怎样让下拉菜单显示呢？这时就用到了JS了，因为IE6是不支持li伪类的哦。但是我们还是先用li伪类先哦，为了尽快解决上面提出的定位问题。这时加上一行CSS代码#nav li:hover ul{display:block;}这时就实现了显示下拉导航了，除IE6外。这时问题也出来了，在导航后面加上些文字变成这样把鼠标移到菜导航下把网页的内容向下推动了：

这不是我们想要的，这就是上面CSS没定位问题了，也是一定要注意的问题，那怎样改呢，把ul li改成相对定位ul li{ float:left; display:block; position:relative;}，在ul li里面的那个ul（即ul li ul )改成绝对定位ul li ul{display:none; position:absolute;}，就没问题了。

这时还是不算成功，IE6是不支持li:hover,虽然也有JS解决IE6也支持li:hover,但这里并不讨论这个，所以呢还要用到JS,JQ也行。这里就不解释JS了，只把代码贴出来就OK啦！其实学习基础原理很关键，技术大牛都是基础很过关的。<script>
   /*用jquery实现 $(function(){
      $(“ul>li”).hover(function(){
      $(this).find(“ul”).show();
   },function(){
      $(this).find(“ul”).hide();
   })
   })*/
   //下面是js实现
   var nav = document.getElementById(“nav”).childNodes;
   for (var i=0;i<nav.length;i++){
    nav[i].onmouseover = function(){fnNav(this,”block”)};
   nav[i].onmouseout = function(){fnNav(this,”none”)};
}
   function fnNav(obj,flag)
{
obj.getElementsByTagName(“ul”)[0].style.display = flag;
}
  </script>放在body后面，因为加载DOM是从上到下的。