硅谷网：Div+css在下拉及多级弹出菜单中的应用 |
| 2012-12-17 08:46 作者：王 涛 来源：硅谷网 HV： 编辑： 【搜索试试】
|
|
【硅谷网文】据《硅谷》杂志2012年第19期刊文，下拉菜单在网站制作中经常使用，而且应用尤为广泛，它存在使用方便，占用空间小等特点。在web应用开发中也是一个非常重要的功能，就在如何制作下拉菜单及碰到的问题，如何解决做详细介绍，并给出其中涉及到的关键步骤代码。
关键词：网页下拉菜单；DIV+CSS；导航条
0前言
网页的导航条是整个网页布局中的重要部分之一，它的设计好坏将直接影响用户的使用。传统的下拉菜单制作有一定的局限性，制作繁琐、代码臃肿、不易维护，且功能不易扩展，而用CSS样式制作网页下拉菜单，可以轻松的实现内容和样式的分离，修改页面时也更加容易省时，只要改变CSS属性就能产生不同的效果，变化多端，使用灵活，可以轻松实现子菜单横向排列和竖直排列的转换，由于他是根据浏览者的需要自动隐显，大大节约了屏幕空间，即美观又实用，被广泛用于网页设计中。
1实现原理
首先，利用XHTML中的列表标签设置主菜单和子菜单区域，确定页面中的内容；其次使用绝对定位将要隐藏菜单从屏幕上移出，然后，调整鼠标悬停时的定位值，使移出部分在浏览器中显示出来，最后，通过脚本语言实现具体样式的定义。
2下拉菜单的制作步骤及实现
2.1设计页面结构
页面结构由导航菜单和隐藏下拉菜单两个部分构成，利用HTML语吾言中的列表标签ul和li制作下拉菜单的列表，建立各菜单内容的从主关系。在具体实现上可以采用ul嵌套的方法，将要隐藏的菜单制作成上方导航菜单的子菜单。其具体实现的代码如下：
<divid="menu">
<ul>
<li><ahref="#">首页</a></li>
<li><ahref="#">系部介绍</a>
<ul>
<li><ahref="#">系部介绍</a></li>
<li><ahref="#">行政机构</a></li>
<li><ahref="#">各类委员会</a></li>
<li><ahref="#">规章制度</a></li>
</ul>
</li>
<li><ahref="#">质量工程</a>
<ul>
<li><ahref="#">品牌特色</a></li>
<li><ahref="#">精品项目</a></li>
<li><ahref="#">专业建设</a></li>
</ul>
</li>
<li><ahref="#">教学科研</a></li>
<li><ahref="#">党建工作</a></li>
……
</ul>
</div>
2.2设置外层基础样式并对一些默认标签重新定义
基础样式的功能是设置外层元素的整体样式，设置主菜单的外观大小，背景颜色字体等属性。
#menu{width:500px;height:28px;margin:0auto;border-bottom:3pxsolid#E10001;}
由于大多数标签都有自己的默认样式，因此需对标签重定义，才能把全局的样式统一起来，通过重新定义标签避免了各个浏览器对标签默认样式解析差异造成页面显示的不一致。例如页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点等。
body{margin:0px;padding:0px;font-size:12px;font-weight:normal;line-height:1.5;/*设置内外边距为0*/}
ul{list-style:none;/*清除ul标签默认的圆点*/}
img{border-style:none;/*清除图片有链接时默认的边框*/}
a{color:#000;text-decoration:none;/*链接文字没下划线*/}
a:hover{color:#F00;}
2.3设置主导航、下拉栏目样式
主导航样式其主要功能是设置ul和li元素的高度和宽度，设置各元素所占用的空间，并定义元素的背景样式和链接样式。利用css对DIV标记的列表进行修饰控制，实现对列表的纵向、横向排列，鼠标的响应效果，并对主菜单项及子菜单项的超链接的各项属性进行配置。
具体代码如下：
#menuul{list-style:none;margin:0px;padding:0px;}
#menuulli{float:left;margin-left:2px;position:relative;}
#menuullia{display:block;width:87px;height:28px;line-height:28px;text-align:center;background:url(image/lx-1.gif)0-28pxno-repeat;font-size:14px;}
#menuullia:hover{background:url(image/lx-1.gif)0-56pxno-repeat;}
#menuulliullia{background:none;}
#menuulliul{display:none;border:1pxsolid#ccc;position:absolute;}
#menuulliulli{float:none;width:85px;background:#eee;margin:0;}
#menuulliullia{background:none;}
#menuulliullia:hover{background:#bf2501;color:#fff;}
#menuulli:hoverul{display:block;}
其中涉及到最关键技术有以下几点：
2.3.1父层li的相对定位
把第一层的li定义成相对定位：#menuulli{position:relative;}，这样下拦菜单的绝对定位就不会偏移，不脱离文档流，以其最接近的一个最有定位设置的父对象进行绝对定位。另外，需要对下拉菜单的列表做如下设置：
1）设置下拉列表的ul不显示：需要给#menuulliul增加一个display:none属性，并进行绝对定位position:absolute.，当其绝对定位后，它将脱离原来文档流，不再占据空间，因此也不会再把下边内容挤跑了
2）对下拉列表的li浮动进行清除，需要把#menuulliulli设置为float:none，对象不浮动。如果不清除下拉列表的ul那就要设置宽度，当不设置宽度也不清除浮动继承时，下拉菜单就变成横向出向。
2.3.2设置鼠标响应效果
1）设置鼠标没有经过主菜单项区域时二级菜单隐藏
#menuulliul{display:none;border:1pxsolid#ccc;}
2）对li使用：hover伪类，当鼠标划过时显示这块内容
#menuulli:hoverul{display:block;}
这里主要使用display属性来控制显示还是隐藏。display:block属性是显示，display:none属性是隐藏，当设置为display:block时，其指派的元素以块状显示出来，不设置display:block时，元素只会按自己的内容在屏幕上占有的区域显示。当设置成display:none时隐藏对象，其不为被隐藏的对象保留其物理空间。
2.4编写脚本调用代码
由于浏览器的不同，有些浏览器不能正常的显示，要能过编写脚本调用代码才能实现，目前在IE8.0及Firefox等浏览器中能正常显示，但在IE6中就不能，因为IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover，属性为display:block，当鼠标划过后，用JS给当前li添加这个样式，根据css的优先级指定的高于继承的原则，就实现了IE6下的正确显示。在CSS样式文件中添加如下代码：#menuulli.sfhoverul{display:block;}，编写JavaScript脚本语言这里不再做详细介绍。
最终的显示效果如下：
本文介绍了运用CSS技术制作网站导航下拉菜单的方法，主要采用CSS技术中的浮动：float、：hover伪类，页面元素display隐藏和显示的状态、定位标签position的相对和绝对定位属性，来实现导航下拉菜单．同时通过CSS的样式规则，做出很多精美的导航。
|
|
|
|
【对“硅谷网：Div+css在下拉及多级弹出菜单中的应用”发布评论】 |
版权及免责声明：
① 本网站部分投稿来源于“网友”，涉及投资、理财、消费等内容，请亲们反复甄别，切勿轻信。本网站部分由赞助商提供的内容属于【广告】性质，仅供阅读，不构成具体实施建议，请谨慎对待。据此操作，风险自担。
② 内容来源注明“硅谷网”及其相关称谓的文字、图片和音视频，版权均属本网站所有，任何媒体、网站或个人需经本网站许可方可复制或转载，并在使用时必须注明来源【硅谷网】或对应来源，违者本网站将依法追究责任。
③ 注明来源为各大报纸、杂志、网站及其他媒体的文章，文章原作者享有著作权，本网站转载其他媒体稿件是为传播更多的信息，并不代表赞同其观点和对其真实性负责，本网站不承担此类稿件侵权行为的连带责任。
④ 本网站不对非自身发布内容的真实性、合法性、准确性作担保。若硅谷网因为自身和转载内容，涉及到侵权、违法等问题，请有关单位或个人速与本网站取得联系（联系电话：01057255600），我们将第一时间核实处理。
|
|
|
|
