查看了《云制造》官网源码，为其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. c++11 右值引用和移动语义

    什么是左值.右值 最常见的误解: 等号左边的就是左值,等号右边的就是右值 左值和右值都是针对表达式而言的, 左值是指表达式结束后依然存在的持久对象 右值是指表达式结束时就不再存在的临时对象区分: 能对 ...

  2. Ubuntu+win7 双系统修改开机启动项顺序

    Ubuntu和windows双系统安装完后默认Ubuntu系统是第一启动项,等待时间是10秒 如果你想改成windows为第一启动项 先进去Ubuntu系统 打开终端 (Ctrl+Alt+T) 修改启 ...

  3. ComboBox的真实值和显示值

    一.类型 /// <summary> /// 下拉框值类型 /// </summary> public class TextAndValue { /// <summary ...

  4. cx_Oracle库导入失败引起crontab中python程序运行失败，并且无错误提示

    今天遇到一个问题: 一个python脚本命令行运行时很正常,放到crontab中就无法工作,日志也没有记录,找了半天,终于发现问题所在. 在脚本最上方,程序如下: #!/usr/local/bin p ...

  5. Java全栈工程师知识体系介绍

    Java全栈工程师,是指掌握多种技能,并能利用多种技能独立完成产品的人,也叫全端工程师(同时具备前端和后台能力),英文Full Stack developer. 那么想要成为一名合格的Java全栈工程 ...

  6. appium版本之谜

    关于appium网上提到的版本是一头雾水,现解释如下: 首先,官网下载的 appium-desktop-Setup-1.3.1.exe是appium桌面版,将appium服务器配置可视化. 而网上提到 ...

  7. CCF 201509-1 数列分段 (水题)

    问题描述 给定一个整数数列,数列中连续相同的最长整数序列算成一段,问数列中共有多少段? 输入格式 输入的第一行包含一个整数n,表示数列中整数的个数. 第二行包含n个整数a1, a2, …, an,表示 ...

  8. Visual Studio 2010下WorldWind编译问题集合

    首先:获取WORLDWIND最新代码——建议不要直接下载源代码包进行编译,一是因为它并不是最新版本的代码,WW的代码最近经常更新:二是缺很多依赖的类库.建议用TortoiseSVN客户端从source ...

  9. Android 电脑投屏工具Vysor Pro介绍

    Chrome的插件,直接到chrome的扩展程序里面搜索Vysor,安装即可 如何破解: C:\Users\lanlan.shi\AppData\Local\Google\Chrome\User Da ...

  10. html页面选择图片上传时实现图片预览功能

    实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...