基于CSS驱动多级下拉菜单实现.docVIP

基于CSS驱动多级下拉菜单实现摘要：本文讲述了如何使用纯CSS 代码将嵌套的HTML无序列表转化成多级下拉菜单，并简单阐述了如何为动态脚本语言（如ASP、JSP和PHP等）提供可编程接口，从而使得存储于数据库中的下拉菜单数据“轻易”的融入HTML代码中。 关键词： CSS；HTML；下拉菜单 中图分类号：TP393.092 文献标识码：A 文章编号：1007—9599 （2012） 14—0000—02 网站的导航（菜单）是指引用户快速、准确查找信息的主要途径，很多网站都将导航组织成多级下拉菜单的形式来提高网站的交互性。一些网站的多级下拉菜单采用JavaScript脚本语言实现，但使用JavaScript实现的菜单可能会有一些风险，如用户出于某种原因而禁止浏览器运行JavaScript。 CSS提供了一些伪类（如：hover伪类），使得我们能够应用CSS伪类来创建多级下拉菜单，从而摆脱JavaScript带来的一些麻烦。 一、设计思想 本文讨论的下拉菜单将采用嵌套的HTML无序列表进行构建——各级菜单及其子菜单都使用标签创建，子菜单嵌套在父菜单标签中。首先，我们需要将各子级菜单隐藏，通过设置CSS提供的display属性实现。其次，我们需要设置当鼠标经过各父级菜单时的行为（如鼠标移动到父级菜单时显示其子菜单，鼠标离开父级菜单时隐藏其子菜单），通过使用：hover伪类实现。最后，我们需要考虑的是子菜单的显示位置（如一级菜单与二级菜单的显示位置并不一样），通过设置CSS提供的position属性实现。 二、定义文档结构——编写HTML代码 假设我们要设计一个图书馆网站的导航，顶级导航包括首页、资源和新闻三项。资源含有一个子菜单，该子菜单包括期刊、图书和论文三项。图书含有一个子菜单，该子菜单包括中文图书和西文图书两项。根据上述需求，我们最终将实现的效果及编写的HTML代码分别如图2—1与代码2—1所示。 三、布局菜单 目前，代码2—1在浏览器中运行的结果为包含一些超链接的嵌套的垂直排列的无序列表。为了实现图2—1所示效果，我们需要对无序列表进行布局。在布局的过程中，会用到CSS的两大布局工具——浮动与定位。 我们先设置一些基本样式，如网页的字体、字号、修改无序列表的默认样式（如去掉列表项前面的圆点或方点）和去掉超链接的下划线等，代码如下所示。 接下来我们将无序列表由垂直转化为水平，这里会用到第一个布局工具——浮动工具。通过CSS提供的float属性，我们可以轻易的实现由垂直到水平的转变，代码如下所示。 .menu li {float：left； margin—left：20px； border：1px solid；} 我们发现，在上述代码的作用下，所有的无序列表都转化为水平排列，而这并不是我们想要的效果。由图2—1所示，只有顶级菜单需要转化为水平排列。为解决此问题，需要重新设置子菜单样式，代码如下所示。 接下来我们需要考虑子菜单的显示位置，这里会用到第二个布局工具——定位工具。通过CSS提供的position、top、right、bottom和left属性，我们可以轻易的将子菜单定位到任何位置。通常情况下，元素的定位是相对于根元素（即元素）进行定位。为了更好的控制子菜单的显示位置，我们会相对于子菜单的父级元素（将其position属性设置为relative）进行定位，这样就不会由于父级菜单位置的变化而影响到子菜单位置的显示，代码如下所示。 四、美化菜单 接下来我们需要对菜单进行美化，让其看起来舒服一些。为了达到图2—1所示的3D效果，我们需要设置、元素边框及背景的颜色，这里我们将采用以字母#开头的十六进制颜色值（如#fff表示白色）进行设置，代码如下所示。 现在，菜单在浏览器中运行的效果如图4—1所示。 根据图4—1所示的效果，我们发现很难确定二级菜单所属的父级菜单项（如果将中文图书与西文图书改为中文与西文，就难以分辨该菜单是属于期刊还是属于图书）。所以，我们需要设置子菜单项的鼠标悬停样式来解决此问题，代码如下所示。 接下来我们需要考虑的是如何告诉用户哪个菜单项含有子菜单，我们的解决办法为给每个含有子菜单的元素的前方加上一个特殊的字符（如◆），这里我们将用到：before伪对象与content[1]属性。最后，我们会使用box—shadow[2]属性为子菜单添加阴影效果，代码如下所示。 美化后的菜单在浏览器中运行的效果如图2—1所示。 五、实现“下拉”行为 菜单的布局及美化已经完成，接下来我们将实现最为重要的效果——”下拉”行为。首先，我们需要将子菜单隐藏，然后将：hover伪类应用到含有子菜单的元素，并将该元素所包含的元素的display属