下拉菜单
这种方法是基于 A List Part 介绍的 Suckerfish Dropdowns 技术实现的。这个菜单也是基于简单的无序列表实现的。顶级的菜单项是一个主列表,每个主菜单对应的下拉菜单项将放在内嵌列表中:
首先为顶级菜单添加样式规则:去除它的默认的样式,同时将列表项的 float 属性设置成 left ,以使它们以水平方式排列,然后 列表项的 position 属性设置成 relative,以便
后续能够定位到其包含的弹出菜单:
强制使菜单中的链接 以块形元素的形式显示,从而让它们能够填充菜单项所处的方形区域,在IE6(以及更早期的版本)中无法实现效果,但通过把链接的宽度设置成100%,也能确保可点击的区域扩展到整个容器范围。
接下来,将为生成弹出菜单的内嵌列表添加样式规则:使它们在默认情况下不会显示 (display: none),而且在显示时使用绝对定位模式,以确保它们不会影响文档其他内容的页面布局。
为了避免弹出菜单也以水平方式排列,所以需要将 float 属性的值设置为 none;
#nav ul li {
float: none;
}
最终,通过使用 :hover伪类使鼠标指针移动到菜单项时显示出弹出菜单:
以上的代码最初将把内嵌列表的 display 属性设置为 none ,当用户将鼠标指针移到主菜单项上时,内嵌列表的 display 属性就将被设置为 block ,菜单也就将显示出来。
但这种效果在IE6中是无法实现的, 因为在IE6浏览器中,:hover 伪类仅适用于链接,其他元素都不可用。
其他的CSS代码简单地应用一些可视化样式规则,对菜单的外观提供了一些美化的效果。
注意:
当弹出菜单显示出来时,用户必须向下移动鼠标指针以选中弹出菜单中的某个菜单项,但执行这个操作时,鼠标指针将会从主菜单项上移开,因为 :hover 伪类将不再生效。
看看页面的样式规则,我们就能发现在此使用了绝对定位模式来显示内嵌列表,从而防止对页面中的其他内容产生影响。
理论上我们应该在顶级菜单和弹出菜单之间留出一些空间,这些空间可以通过为顶级菜单添加边距(margin)的方法来实现。但在IE7中,当鼠标指针放在这个边距范围中时,弹出菜单也将消失。因此我们必须通过为顶级菜单应用白色边框(border)来实现这种空间。
这种方法是基于 A List Part 介绍的 Suckerfish Dropdowns 技术实现的。这个菜单也是基于简单的无序列表实现的。顶级的菜单项是一个主列表,每个主菜单对应的下拉菜单项将放在内嵌列表中:
首先为顶级菜单添加样式规则:去除它的默认的样式,同时将列表项的 float 属性设置成 left ,以使它们以水平方式排列,然后 列表项的 position 属性设置成 relative,以便
后续能够定位到其包含的弹出菜单:
强制使菜单中的链接 以块形元素的形式显示,从而让它们能够填充菜单项所处的方形区域,在IE6(以及更早期的版本)中无法实现效果,但通过把链接的宽度设置成100%,也能确保可点击的区域扩展到整个容器范围。
接下来,将为生成弹出菜单的内嵌列表添加样式规则:使它们在默认情况下不会显示 (display: none),而且在显示时使用绝对定位模式,以确保它们不会影响文档其他内容的页面布局。
为了避免弹出菜单也以水平方式排列,所以需要将 float 属性的值设置为 none;
#nav ul li {
float: none;
}
最终,通过使用 :hover伪类使鼠标指针移动到菜单项时显示出弹出菜单:
以上的代码最初将把内嵌列表的 display 属性设置为 none ,当用户将鼠标指针移到主菜单项上时,内嵌列表的 display 属性就将被设置为 block ,菜单也就将显示出来。
但这种效果在IE6中是无法实现的, 因为在IE6浏览器中,:hover 伪类仅适用于链接,其他元素都不可用。
其他的CSS代码简单地应用一些可视化样式规则,对菜单的外观提供了一些美化的效果。
注意:
当弹出菜单显示出来时,用户必须向下移动鼠标指针以选中弹出菜单中的某个菜单项,但执行这个操作时,鼠标指针将会从主菜单项上移开,因为 :hover 伪类将不再生效。
看看页面的样式规则,我们就能发现在此使用了绝对定位模式来显示内嵌列表,从而防止对页面中的其他内容产生影响。
理论上我们应该在顶级菜单和弹出菜单之间留出一些空间,这些空间可以通过为顶级菜单添加边距(margin)的方法来实现。但在IE7中,当鼠标指针放在这个边距范围中时,弹出菜单也将消失。因此我们必须通过为顶级菜单应用白色边框(border)来实现这种空间。
我在每个列表项的顶部添加了一个非常小的边距,其值和底部的负边距相等。这将使菜单向下移动一个像素,恰好确保白色边框不会覆盖顶级菜单的底部。
<!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>drop-down</title>
<link rel="stylesheet" type="text/css" href="menus.css" />
<script type="text/javascript">
function addClass(li){
li.className = 'hover';
}
function removeClass(li){
li.className = '';
}
</script>
</head>
<body>
<ul id="nav">
<li οnmοuseοver="addClass(this)" οnmοuseοut="removeClass(this)"><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
<li οnmοuseοver="addClass(this)" οnmοuseοut="removeClass(this)"><a href="#">Main courses</a>
<ul>
<li><a href="">Meat</a></li>
<li><a href="">Fish</a></li>
<li><a href="">Vegetarian</a></li>
</ul>
</li>
<li οnmοuseοver="addClass(this)" οnmοuseοut="removeClass(this)"><a href="#">Desserts</a>
<ul>
<li><a href="">Fruit</a></li>
<li><a href="">Puddings</a></li>
<li><a href="">Ice Creams</a></li>
</ul>
</li>
</ul>
</body>
</html>
@CHARSET "UTF-8";
body {
font: 1em Verdana, Arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 1em 0 0 1em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font-size: 80%;
margin-right: 1em;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
* html #nav a {
width: 100%;
}
#nav ul {
display: none;
position: absolute;
padding: 0;
}
#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
#nav li.hover ul, #nav li:hover ul {
display: block;
}