自定义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: $(' ...
随机推荐
- [APIO 2010] 特别行动队
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1911 [算法] 设前i个士兵"修正"后的最大战斗力为fi 令su ...
- kitti数据集标定文件解析
1.kitti数据采集平台 KITTI数据集的数据采集平台装配有2个灰度摄像机,2个彩色摄像机,一个Velodyne64线3D激光雷达,4个光学镜头,以及1个GPS导航系统.图示为传感器的配置平面图, ...
- Azure ARM (22) Azure Policy入门
<Windows Azure Platform 系列文章目录> 我们知道,在Azure服务层级中,分为以下几个层次: 1.企业合同 2.订阅 3.资源组 4.资源 我们使用的Azure资源 ...
- NHibernate错误：Could not compile the mapping document的解决
用动软代码生成器的NHibernate生成模板,生成一个“XML映射模板”,老是提示Could not compile the mapping document的问题. 各种的找,就是没找到问题. 后 ...
- redis实例
<?php Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 本篇文章,主要介绍利用PHP使用Redis ...
- Appleman and a Sheet of Paper
题意: 给一纸条,两种操作: 1.将左侧长度为$x$的纸条向右翻折. 2.询问位于$[l,r]$的纸条总长度. 解法: 考虑启发式,每一次一个小纸条折叠我们可以看做是一次合并,如果我们每一次将较小的纸 ...
- java调用POI读取Excel
HSSFWorkbook:是操作Excel2003以前(包括2003)的版本,扩展名是.xls:XSSFWorkbook:是操作Excel2007的版本,扩展名是.xlsx: 1.注意点 getPhy ...
- 深入Mybatis配置文件
Configuration是干嘛的 Configuration就像是Mybatis的总管,Mybatis的所有配置信息都存放在这里,此外,它还提供了设置这些配置信息的方法.Configuration可 ...
- PPJQR-GKK-2深度学习及应用
参考资料: UFLDL:http://deeplearning.stanford.edu/wiki/index.php/UFLDL_Tutorial Deep Learning Turtorial:h ...
- python 中 模块，包， 与常用模块
一 模块 模块:就是一组功能的集合体, 我们的程序可以直接导入模块来复用模块里的功能 导入方式 一般为 : import 模块名 在python中, 模块一般分为四个通用类别 1使用python编写. ...