自定义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: $(' ...
随机推荐
- poj2828 Buy Tickets——倒序处理
题目:http://poj.org/problem?id=2828 这题可以倒序来做,因为越靠后的人实际上优先级越高: 用0和1表示这个位置上是否已经有人,0表示有,1表示没有,这样树状数组维护前缀和 ...
- 从MySQL获取数据
安装 PM> install-package newtonsoft.json PM> install-package mysql.data string connectionString ...
- 获取access_token时却报出下列错误信息：{"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint: [KJZfAa0644e575]"}，以及一些其他报错
获取access_token时却报出下列错误信息:{"errcode":40164,"errmsg":"invalid ip 61.172.68.21 ...
- ElasticSearch入门及核心概念介绍
Elasticsearch研究有一段时间了,现特将Elasticsearch相关核心知识和原理以初学者的角度记录下来,如有不当,烦请指正! 0. 带着问题上路——ES是如何产生的? (1)思考:大 ...
- 【Data Structure & Algorithm】 查找最小的k个元素
查找最小的k个元素 题目:输入n个整数,输出其中最小的k个. 例如输入1, 2, 3, 4, 5, 6, 7和8这八个数字,则最小的4个数字为1, 2, 3和4. 分析:这道题最简单的思路是把输入的n ...
- TypeScript完全解读(26课时)_8.ES6精讲-ES6中的类(进阶)
8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Fo ...
- 爬虫代码实现四：采用Hbase存储爬虫数据(2)
导入hbase的jar包,在maven仓库找:进入http://mavenrepository.com/,输入hbase client,选择apache hbase client, 点击进入,选择 点 ...
- Linux下共享库嵌套依赖问题 （转载）
转自:http://my.oschina.net/moooofly/blog/506466 问题场景: 动态库 librabbitmq_r.so 内部依赖动态库 libevent_core.so 和 ...
- C# in查询
一.前言 在做项目中,我们会经常使用到 in 查询语句.那么如果我们用 EF 和 Linq 怎么写?接下来看代码 二.实例 我使用的是区域查询的例子,基本的 sql 语句如下: SELECT * FR ...
- Linux whereis 搜索命令位置
在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 文件搜索命令: whereis 基础的命令 命令名称:whereis 命令的所在路径:/usr ...