自定义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.
自定义Mega菜单的巧妙实现的更多相关文章
- ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- SharePoint 2013 自定义扩展菜单
在对SharePoint进行开发或者功能扩展的时候,经常需要对一些默认的菜单进行扩展,以使我们开发的东西更适合SharePoint本身的样式.SharePoint的各种功能菜单,像网站设置.Ribbo ...
- SharePoint 2013 自定义扩展菜单（二）
接博文<SharePoint 2013 自定义扩展菜单>,多加了几个例子,方便大家理解. 例七 列表设置菜单扩展(listedit.aspx) 扩展效果 XML描述 <CustomA ...
- JavaScript自定义右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SharePoint开发 - 自定义导航菜单（一）菜单声明与配置
博客地址 http://blog.csdn.net/foxdave 本篇描述自定义sharepoint菜单的一种方式,自定义菜单适用于一些门户等需求的网站 自定义的菜单有自己的数据源,可以是数据表,可 ...
- 自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]
许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...
- jquery easyui鼠标右击显示自定义的菜单
1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单: 在html页面中写: <div id="menu" class="easyui-menu& ...
- 为SharePoint网站创建自定义导航菜单
转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...
- js禁止默认的右键菜单或出现自定义右键菜单
1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...
随机推荐
- 使用weui
1 在https://github.com/weui/weui-wxss/下载项目,得到weui.wxss文件 2 把文件放在小程序项目的根目录下 3 在app.wxss中引用weui.wxss文件 ...
- 《Kubernetes权威指南第2版》学习（二）一个简单的例子
1: 安装VirtualBox, 并下载CentOS-7-x86_64-DVD-1708.iso, 安装centOS7,具体过程可以百度. 2:开启centOS的SSH, 步骤如下: (1) yum ...
- Asset Catalog Help (五)---Migrating an iOS App Icon Set or Launch Image Set
Migrating an iOS App Icon Set or Launch Image Set Simplify image management by moving existing app i ...
- 技术胖Flutter第三季-17布局PositionedWidget层叠定位组件
博客地址: https://jspang.com/post/flutter3.html#toc-d7a 把我们上节的 Container的部分代码去掉. 使用:Positioned 有点像css里面的 ...
- 如何将excel中的一个表格内容转成xml格式的文件
转自:http://www.cnblogs.com/sansi/archive/2012/02/06/2340471.html 感谢作者,解决了折磨我几天的问题,顿时心情开朗~ ----------- ...
- Qt-MVC图形视图框架分解
前面在<Qt-MVC图形视图框架出识>中我们了解了Qt图形视图框架中三个最基本的类,弄清他们的关系,本片小文,我们将对QGraphicsView,QGraphiceScene,QGraph ...
- E20180712-hm
directive n. 指令; <美>命令,训令,指令; 方针;
- numpy.ndarray常用属性和方法
import numpy as np a = np.array([[1,2,3],[4,3,2],[6,3,5]])print(a) [[1 2 3] [4 3 2] [6 3 5]] print(a ...
- Lightoj1093 【线段树】
题意: 给出n个数,然后对于D区间的数求一个最大差值 思路: 区间最大最小...我居然没想到线段树... #include <bits/stdc++.h> using namespace ...
- Unity3D调用摄像头，画面为翻转的问题
http://blog.csdn.net/a117653909/article/details/16119907 Unity3D中新建一个工程,加一个Plane,新建一个C# 脚本,调用摄像头,不过显 ...