css配合实现二级下拉菜单导航

zxh5566  2016-07-22 06:15   Hits: 

二级下拉菜单导航在网页中很常见,二级菜单的显示和隐藏属于行为层的工作,通常是javascript来完成的,本文主要说明如何合理的通过xhtml构建二级菜单导航的结构以及利用css样式实现并配合js脚本实现显示或隐藏二级菜单导航。无序列表的嵌套是有规律的,必须遵循标签闭合的规则,二级导航就是由两个无序列表嵌套而来的,如下列xhtml代码:
<ul id="nav">
 <li><a href="#">首页</a></li>
 <li><a href="#">关于我们</a>
  <ul>
   <li><a href="#">我们的故事</a></li>
   <li><a href="#">我们的团队</a></li>
  </ul>
 </li>
 <li><a href="#">我们的服务</a>
  <ul>
   <li><a href="#">网页设计</a></li>
   <li><a href="#">页面制作</a></li>
   <li><a href="#">程序开发</a></li>
  </ul>
 </li>
 <li><a href="#">联系我们</a>
  <ul>
   <li><a href="#">团队主力</a></li>
   <li><a href="#">团队成员</a></li>
  </ul>
 </li>
</ul>

在无css样式的情况下,我们可以看到清晰明朗的导航之间的关系,在网页中为了美观和利用空间都会将二级导航隐藏,只有当鼠标经过一级导航时才会触发二级导航的显示,而鼠标移开后又会隐藏相应

的二级导航。基于以上考虑,我们需要将二级导航隐藏,并且同时设置其基本样式。


<style type="text/css">
body {
 font:normal 12px/1.5em "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif;
} /* 设置页面中所有文字的样式 */
ul {
 width:150px;
 margin:0;
 padding:0;
 list-style:none;
 border-bottom:1px solid #CCCCCC;
} /* 将无序列表ul的宽度设置为150px,并且去除内补丁和外补丁以及默认的列表修饰符,最后再添加边框 */
#nav li {
 position: relative;
} /* 将列表li标签设置为相对定位方式,未添加top、left、bottom和right,只是起到子级定位的对象作用 */
#nav li ul {
 display:none;
 position:absolute;
 left:149px;
 top:0;
} /* 将列表li标签内的无序列表设置为绝对定位,相对于其父级顶部0px,靠左149px,并且暂时先隐藏不可见 */
ul li a {
 display:block;
 height:100%; /* 设置为块元素后使其的高度等于父级的高度 */
 padding:5px;
 text-decoration:none;
 color:#777777;
 border:1px solid #CCCCCC;
 border-bottom:0 none;
 background:#FFFFFF;
} /* 设置列表li标签内的锚点a标签为块并设置基本样式属性,最终显示的文字效果 */
#nav li:hover ul, #nav li.over ul {
 display: block;
} /* 触发列表li标签的鼠标经过时显示其子级的无序列表ul标签中的内容,以及类名为over下的子级ul */

/* 针对IE6在触发弹出层时的错位解决方案 */
* html ul li {float:left;zoom:1;}
* html ul li a {zoom:1;}
</style>

以上css样式代码如果暂且不考虑ie6的兼容问题,已经可以达到预期效果,要想在ie6里也实现下拉效果就要配合js完成显示与隐藏的效果。在以上css样式中加粗的部分是实现显示二级菜单效果的重要

属性,首先将无序列表的宽度设置为150px,再将li设置为相对定位,使其子级元素在定位时具有可以参照的对象,而不会导致最终在绝对定位时,二级导航会到处跑。当二级导航定位具有可参照的列表

li的位置后,即可将其设置为绝对定位,绝对定位二级导航位置需要鼠标能触及到二级导航弹出后的感应区,否则鼠标没到二级导航就又隐藏了。#nav li ul中绝对定位后left值为149px,不仅可以将边

框完全靠边显示,增强了美观,还能使鼠标感应二级导航的位置,不会在鼠标未到二级导航就隐藏。
#nav li ul {
 display:none;
 position:absolute;
 left:149px;
 top:0;
}
当鼠标经过含有二级导航的菜单时候,将会显示二级导航,改变#nav li ul中的display为block,即可显示相应的二级导航:

#nav li:hover ul, #nav li.over ul {
 display: block;
}
:hover在非锚点a标签中触发时候,ie6不支持该效果,因此需添加一个名为over的类,配合js脚本实现显示二级导航的效果,js代码如下:

<script type="text/javascript">
<!--
startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     this.className+=" over";
    }
    node.onmouseout=function() {
     this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload=startList;
-->
</script>

上一篇:常说的动态网站和静态网站是怎么回事
下一篇:css图文混排实现方法