自定义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: $(' ...
随机推荐
- [POI 2000] 病毒
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2938 [算法] 首先建出给定字符串集的AC自动机 存在无限长的代码当且仅当 : AC ...
- Docker运行MongoDB及Redis及ssh端口映射远程连接
Docker运行MongoDB及Redis及ssh端口映射远程连接 本节内容简介 在本实验里我们将通过完成 MongoDB 和 Redis 两个容器来学习Dockerfile及Docker的运行机制. ...
- 十张Gif动图让你弄懂递归等概念
图像(包括动图)是传递信息的一种高效方式,往往能增强表象.记忆与思维等方面的反应强度.所谓一图胜千言,说的就是这个道理. 今天为大家整理了十张动图GIFS,有助于认识循环.递归.二分检索等概念的具体运 ...
- CentOS 6.5远程连接工具x shell
安装X shell 在Window系统下远程连接Linux,x shell只是一种远程连接工具,类似工具还有CRT.VNC.putty. 以下是安装X shell的注意事项 此选项中,如不把——初始数 ...
- 1.5 sqoop安装及基本使用
一.安装sqoop 1.解压 ##解压 [root@hadoop-senior cdh]# tar zxf sqoop-1.4.5-cdh5.3.6.tar.gz -C /opt/cdh-5.3.6/ ...
- TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性
11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...
- java8--List转为Map、分组、过滤、求和等操作
利用java8新特性,可以用简洁高效的代码来实现一些数据处理~ 定义1个Apple对象: public class Apple { private Integer id; private String ...
- MacBook外置显卡eGPU折腾笔记
MacBook外置显卡eGPU折腾笔记 硬件选购 当今市场上个人电脑的独立显卡,基本上能选的只有NVIDIA和AMD了,如果你想买外置显卡来打游戏的话,NVIDIA和AMD的都可以,但如果是像我一样准 ...
- 【废弃中】JavaScript 内置Object
创建: 2017/09/24 更新: 2018/01/22 增加window对象内容的链接 更改标题: [JavaScript 主要的自带Object] -> [JavaScript 内置Obj ...
- LightOJ 1029 【最小生成树】
思路: 利用克鲁斯卡尔算法,最小生成树把边从小到大排序,然后Union: 最大生成树就是把边从大到小排序,然后Union: #include<bits/stdc++.h> using na ...