您的位置：首页 > 其它

学习二级纵向菜单两步走

2010-12-20 09:03 183 查看

第一步：最最精简版二级纵向菜单

1、首先需要一个无序列表：

<!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>无标题页</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>


而正常的无序列表，大家知道它是有默认样式的，上面的页面显示为(图一)：



所以我们要清除它的默认样式即把ul的list-style:none，这样就显示如下(图二)：



接下来增加二级子节点：

<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>

</li>
<li><a href="#">11</a>

</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>


在浏览器中显示如下(图三)：



大家可以看到二级菜单很正常的显示了，所以我们要使其不可见：设置子无序列表为不可见：

ul li ul
{
display:none;
}


再次运行程序，显示如图一，这显然不是我们想要的效果，接下来按如下进行设置：

ul li:hover ul
{
display:block;
}


这个设置的意思是说，当鼠标滑过一级菜单的li时，二级菜单ul显示为块级元素；可是运行程序发现当鼠标真的划过一级菜单时，二级菜单会把一级菜单给挤开了，这个时候我们应该想到一个属性position:absolute;就是说把二级菜单设置为绝对定位；这样二级菜单将脱离原来文档流，不再占据空间，因此也不会一级菜单内容挤开了，这样以来一个超级简陋的纵向二级菜单就算是完成了。完整代码如下：

 <!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></title>
<style>

ul
{
list-style:none;
}
ul li ul
{
display:none;

position:absolute;
}
ul li:hover ul
{
display:block;
}

</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>

</li>
<li><a href="#">11</a>

</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul></div>
</body>
</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>
<title>无标题页</title>
<style  type ="text/css" >
a
{
text-decoration:none;
}

#nav
{
width:100px;
border:1px solid #ccc;
border-bottom:none;
}
ul
{
list-style:none;
margin:0;
padding:0;

}
ul li
{
background:silver;
padding:0 8px;
height:30px;
border-bottom:1px solid #ccc;
position:relative;
}
ul li ul
{
display:none;
position:absolute;
width:100px;
left:100px;
border-bottom:none;

}
ul li:hover ul
{
display:block;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>

</li>
<li><a href="#">11</a>

</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul></div>

</body>
</html>



代码解释：

首先去除了超链接的样式

设置外包层的宽度为一百，边框的样式；

设置UL的外边距，内边距继而填充nav;

设置一级菜单的每项的背景色、高度、和底边样式，亮点在于设置了position属性，有人会问没有设置top、right、bottom、left属性相对定位的意义在哪，其实这个属性是为了使得他的绝对定位的子元素不再相对于浏览器的左上角而设的具体的参考《学习CSS定位》的小结；

设置UL的left属性，配合已经定位的父元素来使用，

终于搞好了，如有XXX，还请指教
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航