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"); }); }); })()