-- 作者：admin
-- 发布时间：2008/3/26 15:31:23
-- 纯CSS下拉菜单分析
我很少用到下拉菜单这个东西,所以以前看到什么纯CSS下拉菜单的帖子或者文章都没有详细看过.今天碰巧又看到了这样的文章,反正也闲着也闲着,就稍微研究了一下,自己也学着做了一个DEMO.
为什么纯CSS下拉菜单这么受欢迎呢,因为下拉菜单是个好东西,可以使网站导航更加清晰.而在导航种使用JavaScript又有一些弊端.纯CSS下来菜单主要利用了:hover,
Selector : hover { sRules }
这个slector在CSS2中支持任何对象,而在CSS1中仅支持a对象.所以符合标准的纯CSS下拉菜单在IE6.0中还不能使用,要是你仍然在使用IE6.0的话,不妨试试对标准支持良好的Firefox ? 2.0.
一级下拉菜单原理:有了:hover设置鼠标悬停时的属性,那制作下拉菜单就方便了.设想定义一个宽150像数,高20像素名叫menubox的块,在这个块里放入下拉菜单的列表,列表的每一项也是宽150像数高20像素,设置menubox把超出部分隐藏.这时候可以看到的就是菜单里的第一项.当鼠标悬停在menubox上的时候,使用:hover把menubox的高设置为等于菜单的高度,那么菜单的所有项目就显示出来了.
HTML
<div class="menubox">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2 >></a>
</li>
<li><a href="#">Item 1 3</a></li>
</ul>
</div>
CSS
.menubox {
width:150px;
height:20px;
overflow:hidden;
}
.menubox:hover {
height:auto;
}
.menubox a {
display:block;
width:150px;
height:20px;
}
二级下拉菜单原理:二级下拉菜单采用列表嵌套,先把二级菜单使用display:none;隐藏,当鼠标悬停在需要显示二级菜单的条目时,设置display:block;显示该列表.
HTML
......
<li><a href="#">Item 1 2 >></a>
<ul>
<li><a href="#">Item 1 2 1</a></li>
<li><a href="#">Item 1 2 2</a></li>
</ul>
</li>
......
CSS
.menubox ul li ul {
display:none;
}
.menubox ul li:hover ul {
display:block;
}
全部代码
<!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>
<style>
body {
text-align:center;
}
#positioner{
clear:both;
margin:0 auto;
position:relative;
}
.menubox {
float:left;
width:149px;
height:20px;
margin:0 1px 0 0;
padding:0;
overflow:hidden;
}
.menubox:hover {
height:auto;
}
.menubox ul {
margin:0;
padding:0;
}
.menubox ul li {
list-style:none;
background:#cff;
}
.menubox ul li ul {
display:none;
}
.menubox ul li:hover ul {
display:block;
position:absolute;
margin-top:-20px;
left:149px;
}
.menubox a {
display:block;
padding:2px 0 0 0;
width:149px;
height:17px;
border-bottom:1px solid #fff;
font-family:Verdana;
font-size:12px;
text-decoration:none;
color:#000;
}
.menubox a:hover {
background:#ffc;
color:#F00;
}
.menubox ul li.showitem a {
background:#ccc;
}
#item2 li {
background:#fcf;
}
</style>
</head>
<body>
<div id="positioner">
<div class="menubox">
<ul>
<li class="showitem"><a href="#">Item 1</a></li>
<li class="hiddenitem"><a href="#">Item 1 1</a></li>
<li class="hiddenitem"><a href="#">Item 1 2 >></a>
<ul id="item2">
<li class="hiddenitem"><a href="#">Item 1 2 1</a></li>
<li class="hiddenitem"><a href="#">Item 1 2 2</a></li>
</ul>
</li>
<li class="hiddenitem"><a href="#">Item 1 3</a></li>
</ul>
</div>
<div class="menubox">
<ul>
<li class="showitem"><a href="#">Item 2</a></li>
<li class="hiddenitem"><a href="#">Item 2 1</a></li>
<li class="hiddenitem"><a href="#">Item 2 2</a></li>
<li class="hiddenitem"><a href="#">Item 2 3</a></li>
</ul>
</div>
</div>
</body>
</html>
至于IE,因为只支持a:hover,只能在链接里面嵌入表格代替(<a href="#">Tex<table><tr><td><a href="#">Text</a></td></tr></table></a>),但这是标准不支持的做法,所以在真正使用CSS下拉菜单的时候需要两种方法同时使用,已确保页面的兼容性.要是你嫌这样做很麻烦的话,你也可以使用一款叫Visual Infinite Menus的软件自动生成CSS下拉菜单.
|