简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 二级下拉菜单
Blogger Information
Blog 26
fans 1
comment 0
visits 18864
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
二级下拉菜单
坏人也温柔de陈词滥调
Original
1080 people have browsed it

实例


css

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单--css</title>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #656565;
        }
        a:hover{
            color: red;
        }

        .nav{
            width: 700px;
            height: 40px;
            background-color: #E3E4E5;
        }

        .main-menu{
            margin-left: 200px;
            border-top: 1px solid #E3E4E5;
        }

        .main-menu li{
            float: left;
            line-height: 40px;
            text-align: center;
            padding: 0 15px;

            position: relative;
        }

        ul li:hover{
            background-color: #EFEFEF;
        }

        .sub-menu{
            width: 260px;
            background-color: #EFEFEF;
            border-bottom: 1px solid #E3E4E5;
            border-left: 1px solid #E3E4E5;
            border-right: 1px solid #E3E4E5;

            /*子菜单绝对定位*/
            position: absolute;
            top:40px;
            left: 0;

            /*默认不显示*/
            display: none;
        }

        .main-menu li:hover .sub-menu{
            display: block;
        }

    </style>
</head>
<body>

<div class="nav">
    <ul class="main-menu">
        <li><a href="">我的订单</a></li>
        <li><a href="">我的京东</a>
            <ul class="sub-menu">
                <li>
                    <ul>
                        <li><a href="">待处理订单</a></li>
                        <li><a href="">降价商品</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="">我的问答</a></li>
                        <li><a href="">我的关注</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">企业采购</a>
            <ul class="sub-menu">
                <li>
                    <ul>
                        <li><a href="">企业购</a></li>
                        <li><a href="">工业品</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="">商用场景馆</a></li>
                        <li><a href="">礼品卡</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



运行实例 »

点击 "运行实例" 按钮查看在线实例

js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单--JavaScript</title>

    <style>
        ul,li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #999;
        }

        a:hover {
            color: red;
        }


        .nav {
            width: 700px;
            height: 40px;
            background-color: #E3E4E5;
        }

        .main-menu {
            margin-left: 200px;
        }


        .main-menu li {
            float: left;
            line-height: 40px;
            text-align: center;
            padding: 0 15px;

            /*定位父级*/
            position: relative;
        }

        ul li:hover {
            background-color: #EFEFEF;
        }

        .sub-menu {
            width: 260px;
            background-color: #EFEFEF;

            /*子菜单绝对定位*/
            position: absolute;
            top: 40px;
            left: 0;

            /*默认不显示*/
            display: none;
        }

        /*.main-menu li:hover .sub-menu {*/
        /*    display: block;*/

        /*}*/

        .active {
            display: block;
        }
    </style>

</head>
<body>

<div class="nav">
    <ul class="main-menu">
        <li><a href="">我的订单</a></li>
        <li>
            <a href="">我的京东</a>
            <ul class="sub-menu">
                <li>
                    <ul>
                        <li><a href="">待处理订单</a></li>
                        <li><a href="">降价商品</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="">我的问答</a></li>
                        <li><a href="">我的关注</a></li>
                    </ul>
                </li>

            </ul>
        </li>
        <li><a href="">企业采购</a>
            <ul class="sub-menu">
                <li>
                    <ul>
                        <li><a href="">企业购</a></li>
                        <li><a href="">工业品</a></li>
                    </ul>
                <li>
                    <ul>
                        <li><a href="">商用场景馆</a></li>
                        <li><a href="">礼品卡</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script>
    // 将css中原有的鼠标hover事件删除或注释掉,改用JS脚本实现
    // 先在css中添加一个自定义的类样式: .active {display: block} 备用

    // 1. 获取主菜单
    var mainMenu = document.getElementsByClassName('main-menu').item(0);
    // 2. 获取主菜单所有菜单项并转为数组
    var menus = Array.from(mainMenu.children);
   // console.log( menus);
    // 3. 为每一个主菜单添加鼠标移入与移出事件
    menus.forEach(function (menu) {
        // 鼠标移入显示二级菜单,移出则隐藏二级菜单
        menu.addEventListener('mouseover', show, false);
        menu.addEventListener('mouseout', show, false);
    });
    function show(ev) {
        // 二菜菜单是当前主菜单项的最后一个子元素,将'active'动态添加到它上面即可
       // console.log( ev.target);
        ev.currentTarget.lastElementChild.classList.toggle('active');
    }
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！