欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

纯css+div下拉菜单(可用简单)

javascript 夜阑小雨 1457℃ 0评论

鼠标悬停下拉菜单在网页中很常见,一般的下拉菜单都是通过 JavaScript 对菜单的显示和隐藏进行控制,其实用纯粹的 CSS 也可以实现。用 CSS 的几点好处是,不需要考虑客户端浏览器是否禁用了 JS,而且用 CSS 实现下拉菜单效率比 JS 要高,还可以方便地制定样式和定位。我查阅了一些资料,用纯粹的 CSS 实现了下拉菜单,并且支持 IE6,分享给需要的朋友。

CSS 下拉菜单演示地址

首先写出 HTML 代码如下:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>css下拉菜单</title>
<link rel=stylesheet type=text/css href=test.css />
</head>
<body>
<ul id=navigation>
<li>
<a href=#>栏目1</a>
<ul>
<li><a href=#>栏目1–>菜单1</a></li>
<li><a href=#>栏目1–>菜单2</a></li>
<li><a href=#>栏目1–>菜单3</a></li>
<li><a href=#>栏目1–>菜单4</a></li>
</ul>
</li>
<li>
<a href=#>栏目2</a>
<ul>
<li><a href=#>栏目2–>菜单1</a></li>
<li><a href=#>栏目2–>菜单2</a></li>
<li><a href=#>栏目2–>菜单3</a></li>
<li><a href=#>栏目2–>菜单4</a></li>
<li><a href=#>栏目2–>菜单5</a></li>
</ul>
</li>
<li>
<a href=#>栏目3</a>
<ul>
<li><a href=#>栏目3–>菜单1</a></li>
<li><a href=#>栏目3–>菜单2</a></li>
<li><a href=#>栏目3–>菜单3</a></li>
</ul>
</li>
</ul>
</body>
</html>

在没有 CSS 的情况下,它显示为一个最基本的无序列表的样式:

无序列表

下面编写 CSS,代码如下:

body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation , #navigation li ul{
padding:0;
margin:0;
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none
;
color:#000
;
width:120px
;
height:40px
;
line-height:40px
;
border:1px solid #fff
;
border-width:1px 1px 0 0
;
background:#c5dbf2
;
padding-left:10px
;
}

#navigation li ul {
display: none;                         // 经调试发现FF 不能显示,但是只要调换此次2个css代码的顺序就可以显示了.
}

/

* 以下只支持非IE6浏览器 */
#navigation li:hover a {
color:#fff;
background:#2687eb;
}
#navigation li:hover ul {
display:block;
position:absolute;
top:40px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li:hover ul li a:hover {
color:#fff;
background:#6b839c;
}

把 CSS 引入页面后,下拉菜单就做好了,效果是这样的(鼠标停在“栏目1”上的效果):

css下拉菜单

你可能注意到了,我在 CSS 代码中使用了 li:hover 这个伪类选择器,这在 Firefox、Opera 等浏览器中都没有问题,但是有一个很严重的问题就是:在 IE6 中,hover 伪类仅可用于 a 标签,li:hover 在 IE6 中是无效的。所以,这个下拉并没有在 IE6 中实现,我们需要针对 IE6 作出一些改进。既然它只支持 a:hover,那我们就想办法把需要控制的下拉菜单写进 <a></a> 标签中。

改进后的 HTML 代码如下:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>css下拉菜单</title>
<!–[if IE 7]><!–><link rel=stylesheet type=text/css href=test.css /><!–<![endif]–>
<!–[if lte IE 6]><link rel=”stylesheet” type=”text/css” href=”testforIE.css” /><![endif]–>
</head>
<body>
<ul id=navigation>
<li>
<a href=#>栏目1
<!–[if IE 7]><!–>
</a>
<!–<![endif]–>
<table><tr><td>
<ul>
<li><a href=#>栏目1–>菜单1</a></li>
<li><a href=#>栏目1–>菜单2</a></li>
<li><a href=#>栏目1–>菜单3</a></li>
<li><a href=#>栏目1–>菜单4</a></li>
</ul>
</td></tr></table>
<!–[if lte IE 6]>
</a>
<![endif]–>

</li>
<li>
<a href=#>栏目2<!–[if IE 7]><!–>
</a>
<!–<![endif]–>
<table><tr><td>
<ul>
<li><a href=#>栏目2–>菜单1</a></li>
<li><a href=#>栏目2–>菜单2</a></li>
<li><a href=#>栏目2–>菜单3</a></li>
<li><a href=#>栏目2–>菜单4</a></li>
<li><a href=#>栏目2–>菜单5</a></li>
</ul>
</td></tr></table>
<!–[if lte IE 6]>
</a>
<![endif]–>

</li>
<li>
<a href=#>栏目3<!–[if IE 7]><!–>
</a>
<!–<![endif]–>
<table><tr><td>
<ul>
<li><a href=#>栏目3–>菜单1</a></li>
<li><a href=#>栏目3–>菜单2</a></li>
<li><a href=#>栏目3–>菜单3</a></li>
</ul>
</td></tr></table>
<!–[if lte IE 6]>
</a>
<![endif]–>

</li>
</ul>
</body>
</html>

针对 IE6 的 CSS 代码如下:

body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation , #navigation li ul{
padding:0;
margin:0;
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li ul{
display: none;
}
table {
margin:1px;
border-collapse:collapse;
}
/
* 以下针对IE6 */
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li a:hover ul {
display:block;
position:absolute;
top:40px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li a:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li a:hover ul li a:hover {
color:#fff;
background:#6b839c;
}

改进之后已经达到了我们预期的目的,在多种浏览器中都实现了鼠标悬停下拉菜单。

CSS 下拉菜单演示地址

改进的地方主要有:针对 IE6 重新写了一个 CSS,命名为 testforIE.css;通过 IE 和非 IE 浏览器的条件注释 <!--[if lte IE 6]><![endif]–> 实现了针对不同的浏览器设定 <a></a> 标签不同的结束位置,从而可以在 IE6 中通过 a:hover 来控制下拉菜单;把下拉菜单的 <ul> 放在了一个只有一行一列的表格中,因为我目前发现只有这样才可以在 IE6 中正常显示,具体的原因还不是很清楚。

转载请注明:夜阑小雨 » 纯css+div下拉菜单(可用简单)

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址