下拉菜单的两种实现方式：CSS和JS

最新推荐文章于 2024-04-23 11:04:30 发布

七点起床俱乐部

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量1.4w

点赞数 8

文章标签： HTML css javascript 下拉列表

本文链接：https://blog.csdn.net/cho_jun/article/details/72790366

版权

本文的下拉菜单核心是通过改变DISPLAY的值，来改变菜单的出现和隐藏.

在此简单介绍DISPLAY:

display：[参数] 属性定义：设置元素如何显示。

参数：默认为inline，具体参数如下表。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

上表参考：http://www.w3school.com.cn/cssref/pr_class_display.asp

较常用的参数有：inline、none、inline-block、block等，

其中：

inline：常用于无序列表ul，通常列表会默认列式排列（排成一列），使用inline后便可以行式排列（排成一行），也就是元素后面不带换行符；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。

block：高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度 PS：会使元素后面带一个换行符；
inline-block：综合上述两点，使用它的同级元素会排成一行，并且拥有它父元素的宽度；

一、通过CSS实现下拉菜单

源代码：index.css

*{
    margin:0;
    padding: 0;
}
#nav{
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background-color: #eee;
    color: #fff;
}
ul{
    list-style: none;
}
#nav ul li{
    width:100px;
    text-align: center;
    line-height: 50px;
    float: left;
}
#nav ul li ul li{
    float:none;
    background-color: #eee;
    display:none;
}
#nav ul li a{
    display:block;
}
#nav ul li a:hover{
    background-color:#ee0;
}
#nav ul li:hover ul li{
    display:block;
}

源代码：index.html

*{
    margin:0;
    padding: 0;
}
#nav{
    width: 600px;
    height: 50px;
    margin: 0 auto;
    background-color: #eee;
    color: #fff;
}
ul{
    list-style: none;
}
#nav ul li{
    width:100px;
    text-align: center;
    line-height: 50px;
    float: left;
}
#nav ul li ul li{
    float:none;
    background-color: #eee;
    display:none;
}
#nav ul li a{
    display:block;
}
#nav ul li a:hover{
    background-color:#ee0;
}
#nav ul li:hover ul li{
    display:block;
}

通过改变当鼠标没有放在导航栏中时，二级列表display属性为none，否则为block;

二、JS实现下拉列表

index.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">简介</a>
                <ul>
                    <li><a href="">名称</a></li>
                    <li><a href="">获奖详情</a></li>
                </ul>
            </li>
            <li><a href="">历史</a></li>
            <li><a href="">机构</a></li>
            <li><a href="">新闻</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

源代码:script.js


window.οnlοad=initAll;
function initAll(){
    var menu=document.getElementById('li');
    var subMenu=document.getElementById('subnav');
    var subMenuLi=document.getElementById('subnav').getElementsByTagName('li');
    menu.οnmοuseοver=over;
    subMenu.οnmοuseοver=over;
    menu.οnmοuseοut=out;
    subMenu.οnmοuseοut=out;
    function over(){
        for(var i=0;i<subMenuLi.length;i++){
            subMenuLi[i].style.display="block";
        }
    }
    function out(){
        for(var i=0;i<subMenuLi.length;i++){
            subMenuLi[i].style.display="none";
        }
    }
}

源代码：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="index.css">
    <script src="script.js"></script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="" id="li">简介</a>
                <ul id="subnav">
                    <li><a href="">名称</a></li>
                    <li><a href="">获奖详情</a></li>
                </ul>
            </li>
            <li><a href="">历史</a></li>
            <li><a href="">机构</a></li>
            <li><a href="">新闻</a></li>
            <li><a href="">关于我们</a></li>
        </ul>

    </div>
</body>
</html>

这里的主要问题在于JS文件中的

    menu.οnmοuseοver=over;		//鼠标在一级列表上面时，显示
    subMenu.οnmοuseοver=over;		//鼠标在二级列表上面时，显示
    menu.οnmοuseοut=out;		//鼠标在一级列表上面时，不显示
    subMenu.οnmοuseοut=out;		//鼠标在二级列表上面时，不显示

如果没有第二行和第四行，就会出现不能点击二级列表的问题，也就是一旦鼠标离开一级列表，二级列表马上消失。