CSS 实践：两种实现下拉菜单的方法

最新推荐文章于 2024-09-10 16:20:19 发布

原创最新推荐文章于 2024-09-10 16:20:19 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

30 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文探讨了使用CSS实现下拉菜单的两种常见方法，分别是通过visibility属性切换和display属性切换。两种方法都需要设置无序列表样式、浮动元素、绝对定位以及伪类状态切换。区别在于，visibility方法利用visibility: hidden和visible控制可见性，而display方法借助display: none和block控制元素显示。两者都不依赖JavaScript实现。

CSS伪类的一个非常重要的应用就是下拉菜单。
　　最近在学习中发现网上纯粹用CSS实现的下拉菜单主要有两种思路：一种是通过visibility属性的切换，另一种是基于display属性的切换。二者在大体的结构上是一致的，只是对于二级子菜单的隐藏和显示的实现策略上有所不同。
　　下拉菜单的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>
<style type="text/css">


/*
.menu { font-family: Arial, Helvetica, sans-serif; width:455px; margin:0 auto;}
.menu ul{ padding:0px; list-style-type:none; }
.menu ul li { float:left; width:90px; line-height:30px; text-align:center; background-color:#FC0; border:1px #fff solid; border-width:0 1px 0 0;}
.menu ul li a:link, .menu ul li a:visited { text-decoration: none; color: #000;}
.menu ul li:hover {background: #F60;}
.menu ul li:hover a {background: #fff;}
.menu ul li ul { width:90px; position:absolute; visibility:hidden;}
.menu ul li:hover ul li { width:90px; visibility:visible; background: #F96; color: #000; }
.menu ul li ul li a:link, .menu ul li ul li a:visited { color: #000; } 
.menu ul li ul li:hover { background: #39F; }
*/
.menu { font-family: Georgia, "Times New Roman", Times, serif; margin: 0px auto; width: 505px; } 
.menu ul { padding: 0; list-style-type: none; } 
.menu ul li { float: left; } 
.menu ul li a:link, .menu ul li a:visited { background: #3CF; color: #000; text-decoration: none; display: block;　width: 100px; height: 30px;;text-align: center; } 
.menu ul li:hover a { background: #009; color: #fff; font-weight: bold; } 
.menu ul li ul { display: none; } 
.menu ul li:hover ul { display: block; width: 100px; position: absolute; } 
.menu ul li ul li a:link, .menu ul li ul li a:visited { background: #6FF; color: #000; } 
.menu ul li ul li:hover a { background: #60F; color: #F60; font-weight: bold; }

</style>

</head>

<body>
<div class="menu">
    <ul>
        <li>
        	<a href="#">menu_1</a> 
        	<ul>
                <li><a href="#">item_1</a></li>
                <li><a href="#">item_1</a></li>
                <li><a href="#">item_1</a></li>
                <li><a href="#">item_1</a></li>
            </ul>
        </li>
        
        <li>
        	<a href="#">menu_2</a>
            <ul>
            	<li><a href="#">item_2</a></li>
                <li><a href="#">item_2</a></li>
                <li><a href="#">item_2</a></li>
            </ul>
        </li>
        
         <li>
        	<a href="#">menu_3</a>
            <ul>
            	<li><a href="#">item_3</a></li>
                <li><a href="#">item_3</a></li>
                <li><a href="#">item_3</a></li>
            </ul>
        </li>
        
         <li>
        	<a href="#">menu_4</a>
            <ul>
            	<li><a href="#">item_4</a></li>
                <li><a href="#">item_4</a></li>
                <li><a href="#">item_4</a></li>
            </ul>
        </li>
    </ul>
</div>
<br style="clear:both"/>

</body>
</html>

　在不添加CSS的情况下，下拉菜单实际上就是二级无序列表。在CSS中通过对子列表的隐藏与显示的操作来达到下拉的效果。
　　两种实现下拉的方法的共同点在于：
1. 必须将最外层的ul元素的padding属性设为0，以保证整个下拉菜单中的没有无序列表中的自动缩进。同时，将list-style-type设为none，以去除列表项前的标记。
2. 如果主菜单需要横向，则需要把li元素设置为浮动元素，即float: left。
3. 使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。
4. 必须把二级列表的ul元素的position属性为absolute，以保证将该元素及其子元素从文件流中去除，这样一来当二级菜单显示的时候不会影响下面的其它元素。
5. 下拉菜单后面的页面元素，需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素，如果不这样做的话后面的页面元素的位置将会不恰当。
6. 需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。
　　不同点如前所述，即是：当一级菜单项没有焦点的时候，方法一会把二级菜单的ul元素的visibility属性设为hidden，使整个二级菜单不可见;当有焦点的时候，需要把相应的二级菜单的visibility属性改为visible，使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none，当需要可见的时候改为block。
　　上述状态的切换均通过伪类来完成而不调用JavaScript。