layui水平导航条三级
需求
需要做一个顶部的水平导航条，有三级，展开的时候二级和三级一起展开，结果如图：
效果
代码
下面贴上代码：
HTML代码
<div class="layui-header">
<ul id="moudleMenu" class="layui-nav layui-layout-left kit-nav">
<li class="layui-nav-item nav-custom"><a href="javascript:;">一级菜单</a>
<div class="layui-nav-child layui-anim layui-anim-upbit">
<ul style="float: left; text-align: center; color: black; margin: 0;">
<li>
<span>二级标题</span>
<!-- 标题下面的线 -->
<div style="height: 1px; background-color: #1e9fff; width: 90%; margin: 0 auto;"> </div>
</li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
</ul>
<ul style="float: left; text-align: center; color: black; margin: 0;">
<li>
<span>二级标题</span>
<div style="height: 1px; background-color: #1e9fff; width: 90%; margin: 0 auto;"> </div>
</li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
</ul>
</div>
</li>
<li class="layui-nav-item nav-custom"><a href="javascript:;">一级菜单</a>
<div class="layui-nav-child layui-anim layui-anim-upbit">
<ul style="float: left; text-align: center; color: black; margin: 0;">
<li>
<span>二级标题</span>
<div style="height: 1px; background-color: #1e9fff; width: 90%; margin: 0 auto;"> </div>
</li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
</ul>
<ul style="float: left; text-align: center; color: black; margin: 0;">
<li>
<span>二级标题</span>
<div style="height: 1px; background-color: #1e9fff; width: 90%; margin: 0 auto;"> </div>
</li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>我是独特的三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
</ul>
<ul style="float: left; text-align: center; color: black; margin: 0;">
<li>
<span>二级标题</span>
<div style="height: 1px; background-color: #1e9fff; width: 90%; margin: 0 auto;"> </div>
</li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
</ul>
</div>
</li>
<li class="layui-nav-item nav-custom"><a href="javascript:;">一级菜单</a>
<div class="layui-nav-child layui-anim layui-anim-upbit">
<ul style="float: left; text-align: center; color: black; margin: 0;">
<li><a style="padding: 0;" href="'javascript:void(0);"><span>我上面的二级标题呢</span></a></li>
<li><a style="padding: 0;" href="'javascript:void(0);"><span>我是三级</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
需要加上一个css .layui-nav-child{top:60px !important;}
JS代码：
引用jQuery、layui.js、layui.css和element.js文件
layui.use('element', function(){
var element = layui.element;
element.init();
//如果不把layui自带的滑动线移除，会导致子菜单隐藏
$(".layui-nav-bar").css("display","none");
//鼠标悬浮
navMouseOver();
//鼠标移出
navMouseOut();
});
//当鼠标经过时 设置展开菜单的宽度及位置的CSS样式
function navMouseOver() {
$(".nav-custom").each(function() {
$(this).mouseover(function () {
//当鼠标放上时显示子菜单
$(this).children("div").css("visibility", "visible");
$(this).children("div").children("ul").children("li").children("a").children("span").css("visibility", "visible");
//ul的个数
var ulCount = $(this).children("div").children("ul").length;
//li的个数
var liCount = $(this).children("div").children("ul").children("li").length;
//定义字符最大长度
var maxLength = 0;
//遍历当前展开菜单的li
$(this).children("div").children("ul").children("li").each(function() {
//获取展开菜单的标题字符数
if ($(this).children("span").text().length > maxLength) {
maxLength = $(this).children("span").text().length;
}
//获取展开菜单的选择项的字符数
if ($(this).children("span").text() == "") {
if ($(this).children("a").children("span").text().length > maxLength) {
maxLength = $(this).children("a").children("span").text().length;
}
}
});
//每个子菜单的ul长度 为最长字符数*字符像素px+左右空白间隔
var width = maxLength * 13 + 40;
//设置展开菜单的每个子菜单的ul长度 为最长字符数*字符像素px
$(".nav-custom").children("div").children("ul").css("width", width + "px");
//设置展开菜单的总div宽度 为子菜单的ul长度*子菜单ul个数
$(".nav-custom").children("div").css("width", width * ulCount + "px");
//设置展开菜单的总div偏移居中
$(".nav-custom").children("div").css("left", (-1 * width * ulCount) / 2 + ($(".nav-custom").width()) / 2 + "px");
});
});
}
//当鼠标移出时，立即隐藏子菜单(因为不设置隐藏的话，来回切会有延迟导致未隐藏的子菜单变形)
function navMouseOut() {
$(".nav-custom").each(function () {
$(this).mouseout(function () {
//设置div不可见
$(this).children("div").css("visibility", "hidden");
//设置div中的字不可见
$(this).children("div").children("ul").children("li").children("a").children("span").css("visibility", "hidden");
});
});
}
样式的话，按照自己喜欢的调吧(｀・ω・´)
layui水平导航条三级的更多相关文章
- CSS水平导航条和纵向导航条
问题描述: 使用CSS制作水平导航条和纵向导航条 问题解决: (1)水平导航条 1.1 效果预览: 1.2 ...
- HTML布局水平导航条2制作
前两个博文导航条都不是铺满水平的浏览器的,很多导航条样式都是随着浏览器的移动,是100%.此外前两个博文导航条都是块状点击的,也就是给a标签加宽高,设置成块状显示,点击的时候不一定要点文字,只要点击该 ...
- HTML布局水平导航条1制作
该文是用css制作个导航条,用竖线分隔,导航条是点击的多个区块.步骤:ul里设置需要数量的li,li中加上a链接给ul加样式,去掉默认的前面的点给li设置左浮动,让ul里的li横向排列a链接设置成块状 ...
- div自定义的滚动条 （水平导航条）
<!DOCTYPE html> <html> <head> <title></title> <style> div{ /* wi ...
- simple水平导航条
话不多说,看代码: html部分 <body> <ul> <li><a href="#">Home</a></li ...
- css -- 导航条
1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...
- CSS列表及导航条
大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条. 垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...
- [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）
在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...
- ch6 列表和导航条
为列表添加定制的项目符号 可使用list-style-image属性:缺点是对项目符号图像的位置的控制能力不强. 常用的方法:使用list-style-type来关闭项目符号,将定制的项目符号作为背景 ...
随机推荐
- 知识蒸馏（Distillation）
蒸馏神经网络取名为蒸馏(Distill),其实是一个非常形象的过程. 我们把数据结构信息和数据本身当作一个混合物,分布信息通过概率分布被分离出来.首先,T值很大,相当于用很高的温度将关键的分布信息从原 ...
- 润乾V5手机报表说明文档
1.手机报表实例页面简要说明 index.jsp 是报表资源列表页面: mbReport.jsp 是报表展现页面: mbParam.jsp是参数报表展现页面: echarts.jsp是带有echart ...
- App 图标设计 - 圆角透明效果（0 基础使用 PS）
App 图标设计 - 圆角透明效果(0 基础使用 PS) 方法: 如果你有些基础,就不必看图文教程了: 1.使用圆角矩形工具选中,设置圆角尺寸[例如:1024*1024 px(圆角:160 px)] ...
- JSON学习笔记-5
JSON.parse() 1.从服务器接受数据进行解析(一般是字符串) 2.解析前要确保你的数据是标准的 JSON 格式,否则会解析出错.可以使用线工具检测:https://c.runoob.com/ ...
- Sink Prosessor - Flume的可靠性保证：故障转移、负载均衡
Flume的一些组件(如Spooling Directory Source.File Channel)能够保证agent挂掉后不丢失数据. 1.负载均衡 1)Load balancing Sink P ...
- 扩展LV手记
情景概览 系统:CentOS Linux release 7.4.1708 (Core) 磁盘情况: 目标:将sda3扩展到sda2下的centos-root虚拟盘上 操作步骤 1.建立新的PV # ...
- Jmeter入门--性能测试实战
测试需求:测试20个用户访问https://www.baidu.com在负载达到30QPS时的平均响应时间. QPS:QueryperSecond,每秒查询率.一台查询服务器每秒能够处理的查询次数.在 ...
- Request URL参数
登录跳转完整参考: http://www.cnblogs.com/dreamer-fish/p/5435274.html request.META.get('HTTP_REFERER', '/') # ...
- IE漏洞的调试心得
在调试漏洞的过程中,个人感觉最棘手的就是ie浏览器的漏洞和flash player的漏洞了.这里打算记录一下学习过程中的心得(主要是基于uaf类),以方便新人学习. 首先,ie漏洞与众不同的是,程序的 ...
- Ardunio led呼吸灯
#include <Adafruit_NeoPixel.h> #define PIN 9#define LED_NUM 16Adafruit_NeoPixel strip = Adafru ...