实现导航菜单中的二级下拉菜单的三种方式

卡耐
929 阅读2分钟

实现导航菜单中的二级下拉菜单的三种方式

效果图：

批注 2021-10-18 163054.jpg

1.仅使用html和css

HTML部分

    <div id="app">
        <div class="top">
            <div class="top_nav">
                <div>
                    <img src="./images/images/top_03.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_05.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_07.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_09.jpg " alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_11.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <div class="nav_list">
                    <ul>
                        <li><a href="">新闻</a></li>
                        <li><a href="">体育</a></li>
                        <li><a href="">汽车</a></li>
                        <li><a href="">房产</a></li>
                        <li><a href="">旅游</a></li>
                        <li><a href="">教育</a></li>
                        <li><a href="">时尚</a></li>
                        <li><a href="">科技</a></li>
                        <li><a href="">财经</a></li>
                        <li><a href="">娱乐</a></li>
                        <li><a href="">更多 ></a> 
                        <!-- 更多导航菜单中的二级下拉菜单 -->
                            <ul class="li_ul">
                                <div>
                                    <li><a href="">母婴</a></li>
                                    <li><a href="">健康</a></li>
                                    <li><a href="">军事</a></li>
                                    <li><a href="">历史</a></li>
                                    <li><a href="">美食</a></li>
                                    <li><a href="">星座</a></li>
                                    <li><a href="">文化</a></li>
                                    <li><a href="">专题</a></li>
                                    <li><a href="">游戏</a></li>
                                    <li><a href="">动漫</a></li>
                                    <li><a href="">搞笑</a></li>
                                    <li><a href="">游戏</a></li>
                                </div>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="footer">
            <div class="footer_bg">

            </div>
            <div class="footer_text">

            </div>
        </div>
    </div>

CSS部分

 <style>
        #app {
            width: 1212px;
            height: 300px;
            /* background: rgb(180, 180, 180); */
        }

        .top {
            height: 137px;
            background: #ffffff;
        }

        .top_nav {
            position: relative;
            margin-left: 120px;
            top: 44px;
        }

        .top_nav ul {
            width: 131px;
            height: 57px;
            position: relative;
            top: -65px;
            left: 30px;
        }

        .top .top_nav div {
            width: 190px;
            height: 57px;
            float: left;
        }

        .top .top_nav ul li {
            float: left;
            list-style: none;
            color: #00745a;
            font-size: 13px;
            margin-right: 10px;
        }

        .nav {
            position: absolute;
            width: 973px;
            height: 40px;
            background: #000;
            margin-left: 112px;
            top: 124px;
        }

        .nav .nav_list {
            height: 40px;
            margin-left: -26px;
        }
        .nav_list li:last-child:hover ul{
            /*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
            display: block;
        }
        .nav ul li {
            float: left;
            list-style: none;
            line-height: 10px;
            margin-right: 47px;
        }
        .li_ul{
            width: 249px;
            height: 135px;
            margin-top: 5px;
            position: absolute;
            top:42px;
            left: 0; 
            margin-left: 673px;
            /*关键一：将二级菜单设置为display：none;*/
            display: none;
            border:1px solid #dddddd;
        }
        .li_ul div {
            margin-left: -20px;
        }
        .li_ul div li{
            line-height: 26px;
            margin-bottom: 26px;
            margin-right: 35px;
            
        }
        .nav_list .li_ul a{
            color:rgb(0, 0, 0);
        }
        .nav ul li a {
            text-decoration: none;
            color: rgb(255, 255, 255);

        }

        .footer {
            width: 1212px;
            height: 163px;
        }

        .footer_bg {
            height: 26px;
            background: #18c3b1;
        }
    </style>

总结：我们可以看到，这种方法是比较好的，它保证了结构与表现的完全分离。

  • 将二级菜单设置为display：none;
  • 在划过二级菜单从属的一级菜单时，设置为display:block;

2.使用javascript实现二级下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏切图功能自测</title>
    <style>
        #app {
            width: 1212px;
            height: 300px;
            /* background: rgb(180, 180, 180); */
        }

        .top {
            height: 137px;
            background: #ffffff;
        }

        .top_nav {
            position: relative;
            margin-left: 120px;
            top: 44px;
        }

        .top_nav ul {
            width: 131px;
            height: 57px;
            position: relative;
            top: -65px;
            left: 30px;
        }

        .top .top_nav div {
            width: 190px;
            height: 57px;
            float: left;
        }

        .top .top_nav ul li {
            float: left;
            list-style: none;
            color: #00745a;
            font-size: 13px;
            margin-right: 10px;
        }

        .nav {
            position: absolute;
            width: 973px;
            height: 40px;
            background: #000;
            margin-left: 112px;
            top: 124px;
        }

        .nav .nav_list {
            height: 40px;
            margin-left: -26px;
        }
        .nav_list li:last-child:hover ul{
            /*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
            /* display: block; */
        }
        .nav ul li {
            float: left;
            list-style: none;
            line-height: 10px;
            margin-right: 47px;
        }
        .li_ul{
            width: 249px;
            height: 135px;
            margin-top: 5px;
            position: absolute;
            top:42px;
            left: 0; 
            margin-left: 673px;
            /*关键一：将二级菜单设置为display：none;*/
            display: none;
            border:1px solid #dddddd;
        }
        .li_ul div {
            margin-left: -20px;
        }
        .li_ul div li{
            line-height: 26px;
            margin-bottom: 26px;
            margin-right: 35px;
            
        }
        .nav_list .li_ul a{
            color:rgb(0, 0, 0);
        }
        .nav ul li a {
            text-decoration: none;
            color: rgb(255, 255, 255);

        }

        .footer {
            width: 1212px;
            height: 163px;
        }

        .footer_bg {
            height: 26px;
            background: #18c3b1;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="top">
            <div class="top_nav">
                <div>
                    <img src="./images/images/top_03.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_05.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_07.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_09.jpg " alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_11.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <div class="nav_list">
                    <ul>
                        <li><a href="">新闻</a></li>
                        <li><a href="">体育</a></li>
                        <li><a href="">汽车</a></li>
                        <li><a href="">房产</a></li>
                        <li><a href="">旅游</a></li>
                        <li><a href="">教育</a></li>
                        <li><a href="">时尚</a></li>
                        <li><a href="">科技</a></li>
                        <li><a href="">财经</a></li>
                        <li><a href="">娱乐</a></li>
                        <!-- 关键一：在二级标题从属的一级标题标签内(也就是导航【更多】)设置时间执行程序，this代表的时这个li元素 -->
                        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="">更多 ></a> 
                            <!-- 导航菜单中的二级下拉菜单 -->
                            <ul class="li_ul">
                                <div>
                                    <li><a href="">母婴</a></li>
                                    <li><a href="">健康</a></li>
                                    <li><a href="">军事</a></li>
                                    <li><a href="">历史</a></li>
                                    <li><a href="">美食</a></li>
                                    <li><a href="">星座</a></li>
                                    <li><a href="">文化</a></li>
                                    <li><a href="">专题</a></li>
                                    <li><a href="">游戏</a></li>
                                    <li><a href="">动漫</a></li>
                                    <li><a href="">搞笑</a></li>
                                    <li><a href="">游戏</a></li>
                                </div>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <script>
            function show(li){
                // 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
                var ul = li.getElementsByTagName("ul")[0];
                // 关键三：当鼠标划过li时，其子元素ul标签的display为block
                ul.style.display = "block";
            }
            function hide(li){
                // 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
                var ul = li.getElementsByTagName("ul")[0];
                // 关键三：当鼠标划过li时，其子元素ul标签的display为none;
                ul.style.display = "none";

            }
        </script>
        <div class="footer">
            <div class="footer_bg">

            </div>
            <div class="footer_text">

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

</html>

总结：

  1. 在二级标题从属的一级标题标签内(也就是导航【更多】)设置时间执行程序，this代表的时这个li元素
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="">更多 ></a>
...
</li>
  1. 在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
var ul = li.getElementsByTagName("ul")[0];
  1. 当鼠标划过li时，其子元素ul标签的display为block
ul.style.display = "block";
  1. 当鼠标划出li时，其子元素ul的display为none
ul.style.display = "none";

3.用jQuery实现二级下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏切图功能自测</title>
    <style>
        #app {
            width: 1212px;
            height: 300px;
            /* background: rgb(180, 180, 180); */
        }

        .top {
            height: 137px;
            background: #ffffff;
        }

        .top_nav {
            position: relative;
            margin-left: 120px;
            top: 44px;
        }

        .top_nav ul {
            width: 131px;
            height: 57px;
            position: relative;
            top: -65px;
            left: 30px;
        }

        .top .top_nav div {
            width: 190px;
            height: 57px;
            float: left;
        }

        .top .top_nav ul li {
            float: left;
            list-style: none;
            color: #00745a;
            font-size: 13px;
            margin-right: 10px;
        }

        .nav {
            position: absolute;
            width: 973px;
            height: 40px;
            background: #000;
            margin-left: 112px;
            top: 124px;
        }

        .nav .nav_list {
            height: 40px;
            margin-left: -26px;
        }
        .nav_list li:last-child:hover ul{
            /*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
            /* display: block; */
        }
        .nav ul li {
            float: left;
            list-style: none;
            line-height: 10px;
            margin-right: 47px;
        }
        .li_ul{
            width: 249px;
            height: 135px;
            margin-top: 5px;
            position: absolute;
            top:42px;
            left: 0; 
            margin-left: 673px;
            /*关键一：将二级菜单设置为display：none;*/
            display: none;
            border:1px solid #dddddd;
        }
        .li_ul div {
            margin-left: -20px;
        }
        .li_ul div li{
            line-height: 26px;
            margin-bottom: 26px;
            margin-right: 35px;
            
        }
        .nav_list .li_ul a{
            color:rgb(0, 0, 0);
        }
        .nav ul li a {
            text-decoration: none;
            color: rgb(255, 255, 255);

        }

        .footer {
            width: 1212px;
            height: 163px;
        }

        .footer_bg {
            height: 26px;
            background: #18c3b1;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="top">
            <div class="top_nav">
                <div>
                    <img src="./images/images/top_03.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_05.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_07.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_09.jpg " alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
                <div>
                    <img src="./images/images/top_11.jpg" alt="">
                    <ul>
                        <li>男性养生</li>
                        <li>女性养生</li>
                        <li>白领养生</li>
                        <li>老人养生</li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <div class="nav_list">
                    <ul>
                        <li><a href="">新闻</a></li>
                        <li><a href="">体育</a></li>
                        <li><a href="">汽车</a></li>
                        <li><a href="">房产</a></li>
                        <li><a href="">旅游</a></li>
                        <li><a href="">教育</a></li>
                        <li><a href="">时尚</a></li>
                        <li><a href="">科技</a></li>
                        <li><a href="">财经</a></li>
                        <li><a href="">娱乐</a></li>
                        <li class="navmenu"><a href="">更多 ></a> 
                            <!-- 导航菜单中的二级下拉菜单 -->
                            <ul class="li_ul">
                                <div>
                                    <li><a href="">母婴</a></li>
                                    <li><a href="">健康</a></li>
                                    <li><a href="">军事</a></li>
                                    <li><a href="">历史</a></li>
                                    <li><a href="">美食</a></li>
                                    <li><a href="">星座</a></li>
                                    <li><a href="">文化</a></li>
                                    <li><a href="">专题</a></li>
                                    <li><a href="">游戏</a></li>
                                    <li><a href="">动漫</a></li>
                                    <li><a href="">搞笑</a></li>
                                    <li><a href="">游戏</a></li>
                                </div>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <!-- 关键一：引入jQuery库文件 这里我用的是百度 CDN-->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
        <script type="text/javascript">
        // 关键二：正确使用jQuey的语法完成行为。
            $(function(){
                $(".navmenu").mouseover(function(){
                    $(this).children("ul").show();
                })
            })
            $(function(){
                $(".navmenu").mouseout(function(){
                    $(this).children("ul").hide();
                })
            })
        </script>
        <div class="footer">
            <div class="footer_bg">

            </div>
            <div class="footer_text">

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

</html>

总结：

  1. 引入jQuery库文件 这里我用的是百度 CDN
  2. 正确使用jQuey的语法完成行为。
 $(function(){
                $(".navmenu").mouseover(function(){
                    $(this).children("ul").show();
                })
            })
            $(function(){
                $(".navmenu").mouseout(function(){
                    $(this).children("ul").hide();
                })
            })

身不饥寒，天未曾负我；学无长进，我何以对天！

avatar
文章
阅读
粉丝