初学div+css之菜单篇

2007-05

分类:Web标准,关键词:No Data

已有 1,290 位领导视察,其中有 2 位领导做了批示.

导航在网站上占有极重要的地位，Table时代的菜单都是用若干个td并排显示而成。
现在，我们可以用语义化的标签，如li来完成。
菜单一：

<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin:0px; padding:0px;font-family:verdana;}
ul
{
list-style:none;
font-size:10px;
}
li ul
{
display:none;
}
#nav li
{
text-align:center;
margin:3px;
width:100px;
border:solid 1px #ccc;
position:relative;
padding:6px;
display:block;
}
#nav  li ul{position:absolute;top:-4px;left:112px;}
#nav li ul li
{
padding:5px 6px 5px 5px;
}
#nav li ul li a
{
display:block;
width:100px;
text-decoration:none;
border:solid 1px #fff;
}
#nav li a:hover
{
background:#efefef;
border:solid 1px #ccc;
text-indent:30%;
}
#nav li:hover ul,#nav li.over ul
{
display:block;
border:none;
}
</style>
<script type="text/javascript">
var a = function()
{
var nav = document.getElementById('nav');
var lis = nav.childNodes;
for(var i = 0;i<lis.length;i++)
{
if(lis[i].nodeName=='LI')
{
var childLi = lis[i];
childLi.onmouseover = function(){this.className='over';}
childLi.onmouseout = function(){this.className='';}
}
}
}
window.onload = a;
</script>
</head>
<body>
<ul id="nav">
<li>Link
<ul>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
</ul>
</body>
</html>

运行代码

ist-style:none;是去掉列表符号
#nav li下的ul要以li为标准进行绝对定位，这点很重要。
因IE不支持#nav li:hover ul，所以写了一个简单的js来实现，其目的只是给#nav li添加一个mouseover与mouseout事件，
动态改变它的cssName。

菜单二：

<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin:0px; padding:0px;font-family:verdana;}
ul
{
list-style:none;
font-size:10px;
}
li ul
{
display:none;
}
#nav
{
width:700px;
}
#nav  li
{
float:left;
width:100px;
text-align:center;
margin:3px;
border:solid 1px #003399;
cursor:help;
padding:6px;
}
#nav li ul li
{
border:none;
padding:0;
margin:0px;
}
#nav li ul li a
{
text-decoration:none;
display:block;
margin:1px;
padding:6px 0px;
width:97px;
}
#nav li ul li a:hover
{
background:#efefef;
border:solid 1px #ccc;
margin:0px;
}
#nav li:hover ul,#nav li.over ul
{
display:block;
border:none;
}
</style>
<script type="text/javascript">
var a = function()
{
var nav = document.getElementById('nav');
var lis = nav.childNodes;
for(var i = 0;i<lis.length;i++)
{
if(lis[i].nodeName=='LI')
{
var childLi = lis[i];
childLi.onmouseover = function(){this.className='over';}
childLi.onmouseout = function(){this.className='';}
}
}
}
window.onload = a;
</script>
</head>
<body>
<ul id="nav">
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>Link
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
</ul>
</body>
</html>

运行代码

这二个简单的菜单主要是对Box模型的理解，最开始我也被box弄糊涂。注意margin、padding、border。