首页 > 代码库 > 9.2 制作下拉菜单(1)
9.2 制作下拉菜单(1)
一、菜单的HTML结构 下面就来定义菜单的HTML结梅。思路是把整个菜单分为4组，每一组在平常状态时，只显示一级菜单项，当鼠标指针经过时，显示相应的子菜单。首先用ul和li定义出外层结构，然后在每个li项目中，使用dI定义一个菜单项，一级菜单文字定义为dt．子菜单的文字定义为dd。代码如下。 折叠XML/HTML 代码复制内容到剪贴板
可以看到每组li中，第一行文字和后面的文字之间有所区别。下面就开始进行CSS样式设置了。 二、对整体进行设置 ① 首先需要对菜单进行整体设置，为上面的代码中的ul设定一个id，代码如下。 折叠XML/HTML 代码复制内容到剪贴板
② 对ul做常规的CSS设置，将margin、padding清零；设定同定宽度610像素，因为每个菜单项要设为150像素宽，再加上一些间隔，所以这里设置610像素；此外清除列表项前面的圆点。lodidance.com 折叠CSS 代码复制内容到剪贴板
③ 对每一个li项目进行设置。设置微向左浮动，以实现横向排列；设定宽度、margin和padding，这里将右边的margin设置为l像素，使各个菜单项之间间隔l像素。然后，把定位方式设置为相对定位，也使它的下级埘象(dl)能够以它为基准进行绝对定位。 折叠CSS 代码复制内容到剪贴板
在浏览器中的效果如图1所示，可以看到菜单已经横向排列了。  图1 各li横向排列 读者可以网页学习网CSS教程资源中这个步骤完成后的“第9章/Final-1.htm”文件。 三、对dl进行设置 接下来，对dl对象设置样式，代码如下。 折叠CSS 代码复制内容到剪贴板
此时在浏览器中的效果可以看到每个菜单项都增加了背景色，同时下端还产生了圆角的效果，这是如何实现的呢？ 读者可以网页学习网CSS教程资源中这个步骤完成后的“第9章/Final-2.htm”文件。 分析：下面分析一下其中的这个语句： 折叠CSS 代码复制内容到剪贴板
这句话同时设置了背景色（#cb6）和背景图像（图像文件地址为“images/botiom.gif”)。CSS规定，在这种情况下，背景图像覆盖到的地方显示背景图像，而背景图一像投有覆盖的地方则显示背景色。这里的图像只显示一次，即不平铺（no-repeat），并且放置在菜单项的最底下（bottom）。此时，这个图像除了在两侧的圆角位置为白色之外．其他位置都是透明的，这样透明的位置就显示出了背景色，而圆角位置则显示出了两个圆角。 分析：在对dl的设置中，下面有10像素高的padding，圆角图像就在padding中。除了美观之外，padding的作用是，当菜单完全做好以后，子菜单只有在鼠标指针经过时才会显示出米。访问者要选择最下面的菜单项时，如果鼠标指针稍徽超出了下边界，菜单就会立即被隐藏起来，这样在易用性上就会存在缺陷。这里设置一个10像素的padding，这样即使稍稍超出菜单项范围，整个菜单也不至于立即消失。 读者可以试验以下，在Windows程序中，比如Word中，打开一和菜单以后，即使鼠标指针离开菜单范围，菜单也不会消失，只有当鼠标指针在莱单外单击一下，菜单才会消失。但是目前在网页上不能开发出和Windows程序一样的完善用户界面。近几年很多新技术的出现，包括CSS、Ajax等，都是在努力使Web应用的用户体硷更好。甚至达到本地程序的水平。因此，在进行Web设计和开发的时候，需要注意的不仅仅是美观和功能，实际上易用性等方面也在很多细节之中体现出来，希望读者能够注意到这一点。 四、对主菜单项(dt)进行设置 现在对主菜单项进行设置。lodidance.com ① 使用和上面相同的方法设置圆角，此外在主菜单项的下面设置一条暗红色的边框，作为和子菜单的分割，代码如下。 折叠CSS 代码复制内容到剪贴板
② 对主菜单项的连接文字进行设置，都是常规设置，代码如下。 折叠CSS 代码复制内容到剪贴板
此时，在浏览器中的效果如图1所示，可以看到，下拉菜单的雏形已经具备了。  图2 设置dt后的效果 读者可以参考网页学习网CSS教程资源中这个步骤完成后的“第9章/final-3.htm”文件。 点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/730.html |