查看了《云制造》官网源码，为其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. package-info.java到底是什么

    发现距离上一次在这里写博客已经三个多月了...说好的笔耕不辍呢=.= Anyway,今天(确切说是昨天晚上)在code review中被组里的QA II问到在一个叫做package-info.java ...

  2. BZOJ2599：[IOI2011]Race

    浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem. ...

  3. redis实例

    <?php Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 本篇文章,主要介绍利用PHP使用Redis ...

  4. Android开发--AndroidManifest.xml文件解析

    参考文章:http://www.cnblogs.com/pilang/archive/2011/04/20/2022932.html 一.关于AndroidManifest.xml AndroidMa ...

  5. jQuery基本语法2

    jQuery事件 一:jQuery鼠标事件 click单击 dbclick双击 $ele.click()不带任何参数一般是用来指定触发一个事件 $ele.click( handler(eventObj ...

  6. java集合框架之比较器Comparator、Comparable

    参考http://how2j.cn/k/collection/collection-comparator-comparable/693.html Comparator 假设Hero有三个属性 name ...

  7. Flutter实战视频-移动电商-06.Dio基础_Get请求和动态组件协作

    博客地址: https://jspang.com/post/FlutterShop.html#toc-0ee 编写页面代码 创建动态组件HomePage,原来的代码是静态的我们这里就去掉就可以了. 然 ...

  8. Xcode10更新报错：library not found for -lstdc++.6.0.9

    转载链接!:https://blog.csdn.net/timtian008/article/details/82792629 由于iPhone X Max 及iOS12系统的到来,必须升级xcode ...

  9. Codeforces Round #439 (Div. 2)C - The Intriguing Obsession（简单dp）

    传送门 题意 给出三个集合,每个集合的元素数量为a,b,c,现在需要连边,满足集合内元素不可达或最短路为3,求可行方案数 分析 设dp[i][j]为a集合元素为i个,b集合元素为j个的可行方案,易知( ...

  10. HihoCoder 1121二分图一•二分图判定

    背景: 个名字,表示这两个人有一场相亲.由于姑姑年龄比较大了记性不是太好,加上相亲的人很多,所以姑姑一时也想不起来其中有些人的性别.因此她拜托我检查一下相亲表里面有没有错误的记录,即是否把两个同性安排 ...