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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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");

                });

            });

        }

样式的话，按照自己喜欢的调吧(｀・ω・´)

(function navMouseOver() {$(".layui-nav-bar").css("display","none"); $(".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"); var ulCount = $(this).children("div").children("ul").length; var liCount = $(this).children("div").children("ul").children("li").length; var maxLength = 0; $(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; } } }); var width = maxLength * 13 + 40; $(".nav-custom").children("div").children("ul").css("width", width + "px"); $(".nav-custom").children("div").css("width", width * ulCount + 10 +"px"); $(".nav-custom").children("div").css("left", (-1 * width * ulCount) / 2 + ($(".nav-custom").width()) / 2 + "px"); }); }); })(); (function navMouseOut() { $(".nav-custom").each(function() { $(this).mouseout(function() { $(this).children("div").css("visibility", "hidden"); $(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来关闭项目符号,将定制的项目符号作为背景 ...

随机推荐

SqlSugarClientHelper
using SqlSugar; using System; using System.Collections.Generic; using System.Configuration; using Sy ...
redis HyperLogLog 基数估算
HyperLogLog 可以接受多个元素的输入,返回输入元素的基数估算值基数,集合中不同元素的数量.如集合{1,2,3,1,2,3,4}的基数是4.估算,HyperLogLog算法返回的基数不是完全精 ...
单机安装hive和presto
问题: 公司最近在搞presto,主要是分析一下presto和hive的查询大数据量的性能对比: 我先把我的对比图拿出来(50条数据左右)针对同一条sql(select * from employee ...
web前端要学哪些？
本来是学java还有jsp这些东西的,后来毕业了就去找了个前端的工作:一开始就接触 nodejs+express+Angularjs+mongodb这些东西.不知道学了这些东西做前端够不够用.现在也就 ...
Week3——书上的分析
1.long before=System.currentTimeMills(); long after=System.currentTimeMills(); 该l两句是分别记录了开始过滤和结 ...
zabbix系列之三——安装报错
1Zabbix_server启动失败 1.1查看日志:vi /var/log/zabbix/zabbix_server.log zabbix_server [23500]: cannot open l ...
leetCode题解之字符最短路径解法2
1.题目描述 2.分析之前使用的大循环再向两边寻找的算法是 O(n^2)复杂度的,可以利用 multimap降低其复杂度. 3.代码 vector<int> shortestToChar ...
viedo formats vs file formats
web的视频世界,有两个概念非常容易搞混淆,即:视频文件的格式,比如.mp4,.flv,.ogv等等,以及视频本身的格式,就是指的codec算法名称,比如h.264,mpeg-4等. http://w ...
FileStream对文本进行读写操作
class FileHelper { /// <summary> /// 检验文件路径是否合法 /// </summary> /// <param name=" ...
umount nfs文件系统显示 umount.nfs: device is busy
网上的方法一般都是 fuser -m /nfs 查出进程号,然后杀死进程号,或者fuser -km /nfs直接杀死,我试了下都不行解决方法: 对于nfs文件系统来说,umount -l /nfs ...

layui水平导航条三级

需求

效果

代码

layui水平导航条三级的更多相关文章

随机推荐

热门专题