自定义Mega菜单的巧妙实现

查看了《云制造》官网源码，为其mega菜单的巧妙实现打call。

其另辟蹊径，采取父级主控分支的方法，仅对父级“增加/删除”控制标识，从而控制子层显示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
    body{
        padding: 0;
        margin: 0;
    }    
    .navbar{
        height: 70px;
        min-width: 1280px;
        display: flex;
        flex-flow: row nowrap;/*水平不换行*/
        align-items: center;
        background-color: #343a40;
        position: relative;
    }
    .change_container{
        width: 1250px;
        margin: 0 auto;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    .navbar-nav{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    .navbar-nav li{
        height: 70px;
        color:#fff;
    }
    .navbar-nav li>a{
        line-height: 70px;
        padding-left: 8px;
        padding-right: 30px;
        display: inline-block;
        background-image: url('https://www.yungongchang.com/Common/Images/newHome/nav_up.png');
        background-repeat: no-repeat;
        background-position: 80px 30px;
    }
    .dropdown-menu{
        position: absolute;
        top: 67px;
        width: 100%;
        left: 0;
        background: #000;
    }
    .dropdown-menu a{
        display: inline-block;
        padding: 10px;
    }
    /*实现父子级联动的控制样式类*/

    .nav-item>div.dropdown-menu{
        display: none;
    }
    .nav-item.open>div.dropdown-menu{
        display: block;
    }
    
    </style>
    <script>
        window.onload = function(){
        /*实现父级标识class的设置*/
       let triggers = document.querySelectorAll(".navbar-nav>li.nav-item");
            triggers.forEach( el=>{
                el.addEventListener('mouseenter',function(){
                    this.classList.add( 'open' );
                });
                el.addEventListener('mouseleave',function(){
                    this.classList.remove( 'open' );
                });
            } );
        }
    </script>
    <body>
        <nav class="navbar">
            <div class="change_container">
                <a class="navbar-brand">
                    <img src="https://www.yungongchang.com/Common/Images/newHome/logo.png" />
                </a>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a>关于我们</a>
                        <div class="dropdown-menu">
                            <a>公司介绍</a>
                            <a>主创团队</a>
                            <a>核心技术</a>
                            <a>公司动态</a>
                            <a>强大制造产能</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a>关于我们</a>
                        <div class="dropdown-menu">
                            <a>1</a>
                            <a>2</a>
                            <a>3</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a>关于我们</a>
                        <div class="dropdown-menu">
                            <a>4</a>
                            <a>5</a>
                            <a>6</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a>关于我们</a>
                        <div class="dropdown-menu">
                            <a>7</a>
                            <a>8</a>
                            <a>9</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a>关于我们</a>
                        <div class="dropdown-menu">
                            <a>10</a>
                            <a>11</a>
                            <a>12</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a>关于我们</a>
                        <div class="dropdown-menu">
                            <a>13</a>
                            <a>14</a>
                            <a>15</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        
    </body>
</html>

 ——学无止境，保持好奇。May stars guide your way.

posted @ 2019-02-18 11:42  sophel  阅读(447)  评论(0)  编辑  收藏  举报