查看了《云制造》官网源码，为其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.

自定义Mega菜单的巧妙实现的更多相关文章

  1. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  2. SharePoint 2013 自定义扩展菜单

    在对SharePoint进行开发或者功能扩展的时候,经常需要对一些默认的菜单进行扩展,以使我们开发的东西更适合SharePoint本身的样式.SharePoint的各种功能菜单,像网站设置.Ribbo ...

  3. SharePoint 2013 自定义扩展菜单（二）

    接博文<SharePoint 2013 自定义扩展菜单>,多加了几个例子,方便大家理解. 例七 列表设置菜单扩展(listedit.aspx) 扩展效果 XML描述 <CustomA ...

  4. JavaScript自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. SharePoint开发 - 自定义导航菜单（一）菜单声明与配置

    博客地址 http://blog.csdn.net/foxdave 本篇描述自定义sharepoint菜单的一种方式,自定义菜单适用于一些门户等需求的网站 自定义的菜单有自己的数据源,可以是数据表,可 ...

  6. 自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  7. jquery easyui鼠标右击显示自定义的菜单

    1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单: 在html页面中写: <div id="menu" class="easyui-menu& ...

  8. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  9. js禁止默认的右键菜单或出现自定义右键菜单

    1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...

随机推荐

  1. BZOJ_3489_ A simple rmq problem_KDTree

    BZOJ_3489_ A simple rmq problem_KDTree Description 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这 ...

  2. linux 查看某进程 并杀死进程 ps grep kill

    Linux 中使用top 或 ps 查看进程使用kill杀死进程 1.使用top查看进程: $top 进行执行如上命令即可查看top!但是难点在如何以进程的cpu占用量进行排序呢? cpu占用量排序执 ...

  3. C++之自己实现的String类全部

    一:回顾 (1)c++中的string类是在面试中和笔试中经常考的题目: 工程代码免费下载 string类的自行实现 (2)c++中的string类和fstream类合起来是处理外部数据的利器: (3 ...

  4. Makefile的常用技术总结

    一.MAKE中的自动变量:    $@: 表示target的名字    $%: 仅当目标是函数库文件中,表示规则中的目标成员名.例如,如果一个目标是"foo.a(bar.o)",那 ...

  5. MTK LCM帧率设置公式

    clk=(width + W total porch)x(height + H total porch)x (6<18bit>或者x8<24bit>)x fps/ lane n ...

  6. DAG上的DP

    引例:NYOJ16 矩形嵌套 时间限制:3000 ms  |           内存限制:65535 KB 难度:4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可 ...

  7. windows下mysql5.1忘记root密码解决方法[win7]

    步骤如下:1.停止mysql服务(以管理员身份,在cmd命令行下运行) net stop mysql2.使用 mysqld –skip-grant-tables 命令启动mysql数据库 D:\> ...

  8. sort()的升降序函数操作

    sort()函数包含在头文件#include <algorithm>中,是常用的排序函数. functional提供了一堆基于模板的比较函数对象.它们是:equal_to<Type& ...

  9. 【WIP】Swift4 闭包

    创建: 2018/06/05 闭包的声明  闭包的概要 { (参数表) -> 型 in { ... } ● 参数不可以带默认值 ● 参数不可以带标签 ●  定义闭包并直接呼出必须要被代入 {re ...

  10. 渲染路径-实时渲染中常用的几种Rendering Path

    http://www.cnblogs.com/polobymulberry/p/5126892.html?utm_source=tuicool&utm_medium=referral 回到顶部 ...