深入研究CSS下拉菜单

ＩＳＳＮ　１Ｏ０８—９４４６　承德石油高等专科学校学报　Ｊｏｕｒｎａｌ　ｏｆ　Ｃｈｅｎｇｄｅ　Ｐｅｔｒｏｌｅｕｍ　Ｃｏｌｌｅｇｅ　第１５卷第１期，２０１３年２月　Ｖｏ１．１５，Ｎｏ．１，Ｆｅｂ．２０１３　７面　深入研究ＣＳＳ下拉菜单　姚　朋　（承德石油高等专科学信息中心，河北承德０６７０００）　摘要：随着Ｗｅｂ技术的发展，网页结构向着更加标准化的方向发展已经成为趋势。同时随着现代主流浏览器　对ＣＳＳ标准更加全面地支持，ＣＳＳ在网页设计中表现层的位置终于得到重视，其强大的功能也正在得到不断　深入的发掘和应用。一个典型的例子就是以前使用ＪａｖａＳｃｒｉｐｔ等技术实现的下拉菜单，现在用ＣＳＳ就可以轻　松地实现了，并可以兼容当前所有主流的浏览器。　关键字：ＣＳＳ；下拉菜单；兼容ＩＥ６　中图分类号：ＴＰ３１１　文献标识码：Ａ　文章编号：１００８－９４４６（２０１３）０１—００３２—０４　Ｄｒｏｐ－ｄｏｗｎ　Ｍｅｎｕ　ｂｙ　ＣＳＳ　ＹＡ０　Ｐｅｎｇ　（Ｉｎｆｏｒｍａｔｉｏｎ　Ｃｅｎｔｅｒ，Ｃｈｅｎｇｄｅ　Ｐｅｔｒｏｌｅｕｍ　Ｃｏｌｌｅｇｅ，Ｃｈｅｎｇｄｅ　０６７０００，Ｈｅｂｅｉ，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ：Ａｓ　ｗｅｂ　ｔｅｃｈｎｏｌｏｇｙ　ｄｅｖｅｌｏｐｓ，ｔｈｅ　ｗｅｂ　ｐａｇｅ　ｓｔｒｕｃｔｕｒｅ　ｉｓ　ｄｅｖｅｌｏｐｉｎｇ　ｔｏｗａｒｄｓ　ａ　ｍｏｒｅ　ｓｔａｎｄ—　ａｒｄｉｚｅｄ　ｄｉｒｅｃｔｉｏｎ．Ａｓ　ｔｈｅ　ｍａｉｎｓｔｒｅａｍ　ｂｒｏｗｓｅｒ　ｉｓ　ｓｕｐｐｏｒｔｉｎｇ　ＣＳＳ　ｓｔａｎｄａｒｄｓ　ｍｏｒｅ　ｔｈａｎ　ｂｅｆｏｒｅ，ＣＳＳ　ｉｓ　ｉｎｖｉｔｉｎｇ　ｍｏｒｅ　ａｔｔｅｎｔｉｏｎ　ｉｎ　ｗｅｂ　ｄｅｓｉｇｎ　ａｎｄ　ｉｔｓ　ｓｔｒｏｎｇ　ｆｕｎｃｔｉｏｎ　ｉｓ　ａｌｓｏ　ｂｅｉｎｇ　ｅｘｐｌｏｉｔｅｄ　ａｎｄ　ａｐｐｌｉｅｄ．Ａ　ｔｙｐｉｃａｌ　ｅｘａｍｐｌｅ　ｉｓ　ｔｈｅ　ｐｒｅｖｉｏｕｓ　ｕｓｅ　ｏｆ　ＪａｖａＳｃｒｉｐｔ　ｔｅｃｈｎｏｌｏｇｙ　ｔｏ　ｄｒｏｐｄｏｗｎ　ｍｅｎｕｓ，ＳＯ　ｗｅ　ｃａｎ　ｎｏｗ　ｕｓｅ　ＣＳＳ　ｔｏ　ａｃｈｉｅｖｅ　ｔｈｉｓ，ｗｈｉｃｈ　ｉｓ　ｃｏｍｐａｔｉｂｌｅ　ｗｉｔｈ　ａｌｌ　ｔｈｅ　ｃｕｒｒｅｎｔ　ｐｏｐｕｌａｒ　ｂｒｏｗｓｅｒｓ．　Ｋｅｙ　ｗｏｒｄｓ：ＣＳＳ；ａ　ｄｒｏｐ—ｄｏｗｎ　ｍｅｎｕ；ｃｏｍｐａｔｉｂｌｅ　ＩＥ６　１　ＣＳＳ下拉菜单的基本要素和工作原理　用ＣＳＳ实现下拉菜单，需要解决两个基本问题。第一个是当鼠标停留在一级菜单上时，ＣＳＳ要能够　响应这个鼠标事件。第二个是在ＣＳＳ响应这个鼠标事件的时候，让原来处于隐藏状态的二级子菜单显　示出来。在ＣＳＳ标准中，：ｈｏｖｅｒ这个伪类正好可以响应当鼠标停留在某一网页元素上时这样一个鼠标　事件，于是第一个问题解决了。要通过：ｈｏｖｅｒ这个伪类提供的鼠标事件进行处理，来显示二级子菜单，　就需要使用ＣＳＳ包含选择符了¨　。ＣＳＳ包含选择符的功能是可以通过某一网页元素控制包含在其中网　页元素的样式。这时，用ＣＳＳ制作下拉菜单的两条要素已经具备了。因此ＣＳＳ下拉菜单的基本工作原　理就是：通过为一级菜单的网页元素设置：ｈｏｖｅｒ伪类来触发鼠标事件，然后在这个事件中利用ＣＳＳ包含　选择符显示嵌套在一级菜单元素中的二级子菜单。根据这个原理，也可以制作出多级ＣＳＳ下拉菜单。　２　主要ＸＨＴＭＬ和ＣＳＳ代码　２．１主要ＸＨＴＭＬ代码　＜ｕｌ　ｃｌａｓｓ＝”ｍｅｎｕ”＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝””＞首页＜／ａ＞　＜！　一一［ｉｆ　ｈ　ＩＥ　７］＞＜ｄｉｖ＞＜ａ　ｈｒｅｆ＝””＞首页＜ｔａｂｌｅ＞＜ｔｒ＞＜ｔｄ＞＜！［ｅｎｄｉｆ］一一＞　＜ｕｌ＞　＜ｌｉ　ｃｌａｓｓ＝”ｂｏｒｄｅｒ—ｔｏｐ”＞＜ａ　ｈｒｅｆ＝””＞十二五规划＜／ａ＞＜／ｌｉ＞　收稿日期：２０１２—０４—２４　作者简介：姚朋（１９７８一），男，陕西西安人，承德石油高等专科学校信息中心助理馆员。　

姚朋：深入研究ｃｓｓ下拉菜单　・３３・　＜ｌｉ＞＜ａ　ｈｒｅｆ＝…’＞创先争优＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝…　＞学校邮箱＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝””＞对外主页＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝　’＞学校简报＜／ａ＞＜／ｌｉ＞　＜ｌｉ　ｃｌａｓｓ＝”ｂｏｒｄｅｒ—ｂｏｔｔｏｍ”＞＜ａ　ｈｒｅｆ＝　’＞校内通知＜／ａ＞＜／ｌｉ＞　＜／ｕｌ＞　＜！　一一［ｉｆ　ｈ　ＩＥ　７］＞＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞＜／ａ＞＜／ｄｉｖ＞＜！　［ｅｎｄｉｆ］一一＞　＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝””＞管理机构＜／ａ＞　……省略类似代码　＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝””＞教学系部＜／ａ＞　……省略类似代码　＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝…’＞专题网站＜／ａ＞＜／ｌｉ＞　＜／ｕｌ＞　２．２主要ＣＳＳ代码　．ｍｅｎｕ｛　／　一级菜单容器　／　ｗｉｄｔｈ：９００ｐｘ；　／　兼容ＩＥ和Ｏｐｅｒａ浏览器，解决一级菜单自动换行　／　ｈｅｉｇｈｔ：２２ｐｘ；　／￥　兼容火狐和欧朋浏览器，解决ｍａｒｇｉｎ不解析问题　／　ｌｉｓｔ—ｓｔｙｌｅ：ｎｏｎｅ；　ｆｏｎｔ—ｓｉｚｅ：１２ｐｘ；　｝　．ｍｅｎｕ　ｌｉ｛　ｌｆｏａｔ：ｌｅｆｔ；　ｐｏｓｉｔｉｏｎ：ｒｅｌａｔｉｖｅ；　／　相对定位，为二级子菜单定位提供参照　／　｝　．ｍｅｎｕ　ｌｉ：ｈｏｖｅｒ　ｕｌ，　ｍｅｎＵ　ｌｉ　ａ：ｈｏｖｅｒ　ｕｌ／　响应鼠标停留事件，显示二级下拉子菜单　｛　ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ；　ｍｅｎＵ　ａ　｛　／　定义一级菜单中的超链接　／　ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　ｗｉｄｔｈ：６０ｐｘ；　ｍａｒｇｉｎ：１ｐｘ　１ｐｘ　１ｐｘ　１ｐｘ；　ｂｏｒｄｅｒ：１　ｐｘ　ｓｏｌｉｄ＃６９６９６９；　ｐａｄｄｉｎｇ：２ｐｘ　２ｐｘ　２ｐｘ　２ｐｘ；　ｂａｃｋｇｒｏｕｎｄ：＃ｅｅｅｅｅｃ；　ｃｏｌｏｒ：＃０Ｏ０；　ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；　ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；　｝　：－ｃ／　

・３４・　承德石油高等专科学校学报　２０１３年第ｌ５卷第１期　ｍｅｎｕ　ｕｌ｛　ｌｉｓｔ—ｓｔｙｌｅ—ｔｙｐｅ：ｎｏｎｅ；　ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ；　ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ；　ｌｅｆｔ：１ｐｘ；　／　／　／　二级子菜单容器　／　在没有鼠标事件被触发的时候，隐藏二级子菜单　／　二级子菜单相对于父元素ｌｉ绝对定位　／　／　定位二级子菜单的顶部边框紧贴一级菜单的底部边框　通过ｐａｄｄｉｎｇ设置与一级菜单的间距　／　／　ｔｏｐ：２１ｐｘ；　｝　．ｐａｄｄｉｎｇ：３ｐｘ　０　０　０；　／　ｍｅｎｕ　ｌｉ　ｄｉｖ｛　ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ；　ｌｅｆｔ：０ｐｘ；　ｔｏｐ：０ｐｘ；　／　ＩＥ６中一级菜单的定位容器，覆盖标准浏览器的一级菜单　／　．ｍｅｎｕ　ｔａｂｌｅ｛　ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ；　｝　／：ｌ：消除表格对ＩＥ６中一级菜单高度的影响。　／　２．３关键ＸＨＴＭＬ代码分析　以上的ＸＨＴＭＬ代码（除了ＩＥ的条件注释以外）的结构很简单，一级菜单容器．ｍｅｎｕ使用了一个无　序列表，每个二级子菜单也使用一个无序列表嵌套在相应的一级菜单的列表项之内，所有代码符合　ＸＨＴＭＬ的标准。　这段ＸＨＴＭＬ代码看起来复杂的地方是其中的ＩＥ条件注释，引入ＩＥ条件注释，是为了兼容ＩＥ６，原　因是ＩＥ６只支持ａ：ｈｏｖｅｒ伪类，而不支持其它网页元素的：ｈｏｖｅｒ伪类。在国内，截止２０１２年３月份，ＩＥ６　的使用率为２２．４０％　，所以尽管它对ＣＳＳ标准的支持不如现代标准浏览器，却暂时还不能忽视它的存　在。ＩＥ的条件注释是微软从ＩＥ５开始引入网页中的一种非标准逻辑语句，它只能为ＩＥ浏览器所识别，　其它非ＩＥ浏览器则把它当做注释语句忽略掉，因此可以用它来编写针对某个版本ＩＥ浏览器的ＨＴＭＬ　代码　。因此兼容ＩＥ６的方法就只能把二级子菜单嵌套在一个超链接之内，虽然这不符合ＸＨＴＭＬ标　准。但是不能直接把二级子菜单嵌套在原有一级菜单的超链接里，而是要通过ＩＥ条件注释为ＩＥ６增加　一个新的一级菜单的超链接，包含在二级子菜单的外面，然后通过绝对定位，覆盖原有的一级菜单。这　样做既可以兼容ＩＥ６，又可以使这段ＸＨＴＭＬ代码在现代标准浏览器里符合标准。以上ＩＥ条件注释语　句的意思是：当ＩＥ浏览器的版本小于ＩＥ７的时候，向网页中添加包含在条件注释中的ＸＨＴＭＬ代码。所　添加的这些ＸＨＴＭＬ代码的作用包括：１）在二级子菜单容器的无序列表外部添加表格，解决ＩＥ６二级子　菜单的无序列表的问题。２）把这个表格嵌套进超链接里，解决ＩＥ６不支持ｌｉ：ｈｏｖｅｒ伪类的问题。３）为　超链接添加一个ｄｉｖ容器，解决超链接不能正确显示和定位的问题。　２．４核心ＣＳＳ代码分析　二级子菜单虽然嵌套在一级菜单的列表项之内，但其能否正常显示，相对于一级子菜单的位置是一　个关键因素。在现代标准浏览器中，只有当二级子菜单的顶部边框与一级菜单的底部边框紧贴或与一　级菜单的底部ｍａｒｇｉｎ有重合时，鼠标在从一级菜单移动到二级子菜单的过程中，二级子菜单才不会消　失。其次是二级子菜单容器的无序列表ＵＬ必须绝对定位，这样它就不会占用在文档流中的当前位置，　而且还可以浮动显示在其它内容之上。由于二级子菜单的定位父元素是一级菜单，所以一级菜单容器．　ｍｅｎｕ中的ｈ要设置为相对定位。为了使二级子菜单的顶部边框正好可以紧贴着一级菜单的底部边框，　需要知道一级菜单的精确高度。根据盒模型，一级菜单的高度是由其中块状显示的超链接的高度决定　的，计算结果是２０像素，包括外边框，也就是ｍａｒｇｉｎ部分。但在ＩＥ浏览器中，一级菜单的实际高度是　

姚朋：深人研究ＣＳＳ下拉菜单　・３５・　２２像素，多了２像素，可以看出ＩＥ浏览器并没有严格按照盒模型来计算。绝对定位二级子菜单与父元　素顶部的距离为２１像素，使二级子菜单的顶部边框紧贴着一级菜单的底部边框。　默认状态下，在一级菜单的鼠标事件没有被触发的时候，二级子菜单处于隐藏状态，即设置ｖｉｓｉｂｉｌｉ—　ｔｙ：ｈｉｄｄｅｎ属性。当鼠标停留在某个一级菜单上时，对应的ｌｉ：ｈｏｖｅｒ伪类响应这个鼠标事件，通过包含　选择符，设置其包含的二级子菜单ｕｌ的ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ属性，使二级子菜单显示出来。由于二级子菜　单是嵌套在一级菜单之内的，所以当鼠标离开一级菜单的超链接，移动到二级子菜单之上时，二级子菜　单仍然会显示，而当鼠标移走之后，二级子菜单又会恢复默认的隐藏状态。对比用ＪａｖａＳｃｒｉｐｔ实现的下　拉菜单，ＣＳＳ的工作方式就显得非常的简洁，从这个例子也可以看出，ＣＳＳ的某些功能和ＪａｖａＳｃｒｉｐｔ是有　重合的。　２．５　兼容ＩＥ６的ＣＳＳ代码分析　为了兼容ＩＥ６，在ＸＨＴＭＬ代码中通过ＩＥ条件注释增加了一些代码，在ＣＳＳ中也要对其进行相应的　控制。第一是把包含一、二级菜单的ｄｉｖ容器绝对定位，覆盖标准浏览器下显示的一级菜单。第二是把　嵌套在超链接中的表格设置为内联显示，消除表格对ＩＥ６中一级菜单高度的影响，使其与现代标准浏览　器一致。　３　其它问题　３．１兼容问题　一级菜单容器．ｍｅｎｕ类的宽度要显式定义，否则当其实际宽度大于ＩＥ和Ｏｐｅｒａ浏览器窗口时，会　自动换行显示。一级菜单容器．ｍｅｎｕ类的高度也要显式定义，否则Ｆｉｒｅｆｏｘ和Ｏｐｅｒａ浏览器不能正确解　析它与和其后内容之间的ｍａｒｇｉｎ值。根据盒模型分析这个问题的原因应该是：Ｆｉｒｅｆｏｘ和Ｏｐｅｒａ没有根　据一级菜单容器．ｍｅｎｕ所包含的超链接的高度来计算．ｍｅｎｕ容器的高度，而是直接认为它的高度为零，　所以其后的内容就向上流动，直到被一级菜单挡住，从而导致ｍａｒｇｉｎ属性失效。二级子菜单中的列表　项或超链接不能设置ｍａｒｉｇｎ值，否则鼠标在经过ｍａｒｇｉｎ区域时二级子菜单可能会消失。　３．２一、二级菜单间距的调节　一般情况下，二级子菜单是紧贴着一级菜单的底边框显示的，也可以制作二级子菜单和一级子菜单　之间有一定空隙的效果。在现代标准浏览器里，这个效果可以很容易的通过一、二级菜单之间的ｍａｒｇｉｎ　值调节，但是ＩＥ６不支持这种方法。为了兼容ＩＥ６，可以通过设置子菜单容器ｕｌ的ｐａｄｄｉｎｇ．ｔｏｐ属性来调　节一、二级菜单之间的空隙。但如果希望显示效果如图１那样有一个边框，就不能直接设置子菜单容器　ｕｌ的边框，而是要通过设置其内部ｌｉ元素的左右边框、首个ｌｉ元素的顶部边框和末尾ｌｉ元素的底部边框来　模拟一个边框。使用ｐａｄｄｉｎｇ调节一、二级菜单间距的另一个问题是这个距离最大不能超过５像素。　４　结束语　以上介绍的ＣＳＳ下拉菜单可以兼容国内外各种主流的浏览器。除了下拉菜单，使用ＣＳＳ还可以实　现选项卡、图片切换、圆角等很多功能。随着Ｗｅｂ标准化的进程和现代标准浏览器对ＣＳＳ标准更多的　支持，ＣＳＳ将能在网页中完成更多和更炫目的功能。如今，有越来越多的网页设计者开始关注和研究　ＣＳＳ，将来ＣＳＳ在网页设计中的表现将会更加出色。　参考文献：　［１］　侯利军．精通Ｗｅｂ标准网页布局一ｘＨＴＭＬ＋ＣＳＳ＋ＪａｖａＳｃｆｉｐｔ［Ｍ］．北京：人民邮电出版社，２００７　［２］　浏览器之家［ＥＢ／ＯＬ］．ｈｔｔｐ：／／ｗｗｗ．１ｉｕｌａｎ７．ｎｅｔ／ａ／ｔｏｐ／２０１２／０４０２／６５４７．ｈｔｍ１．　［３］　朱印宏．ＣＳＳ商业网站布局之道［Ｍ］．北京：清华大学出版社，２００７．