需求
需要做一個頂部的水平導航條，有三級，展開的時候二級和三級一起展開，結果如圖：
效果
代碼
下面貼上代碼：
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");
});
});
}
樣式的話，按照自己喜歡的調吧(｀・ω・´)