本文實例為大家分享了layui水平導航菜單的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>導航與面包屑</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body><fieldset class="layui-elem-field layui-field-title"> <legend>水平導航菜單</legend></fieldset><ul class="layui-nav"> <li class="layui-nav-item"><a href="">最新活動</a></li> <li class="layui-nav-item layui-this"> <a href="javascript:;">產品</a> <dl class="layui-nav-child"> <dd><a href="">選項1</a></dd> <dd><a href="">選項2</a></dd> <dd><a href="">選項3</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">大數據</a></li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="">移動模塊</a></dd> <dd><a href="">后臺模版</a></dd> <dd class="layui-this"><a href="">選中項</a></dd> <dd><a href="">電商平臺</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社區</a></li></ul><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>垂直導航菜單</legend></fieldset><ul class="layui-nav layui-nav-tree" lay-filter="demo"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默認展開</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">選項一</a></dd> <dd><a href="javascript:;">選項二</a></dd> <dd><a href="javascript:;">選項三</a></dd> <dd><a href="">跳轉項</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="">移動模塊</a></dd> <dd><a href="">后臺模版</a></dd> <dd><a href="">電商平臺</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市場</a></li> <li class="layui-nav-item"><a href="">社區</a></li></ul><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>側邊固定導航菜單</legend></fieldset><ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="demo"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默認展開</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">選項一</a></dd> <dd><a href="javascript:;">選項二</a></dd> <dd><a href="javascript:;">選項三</a></dd> <dd><a href="">跳轉項</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="">移動模塊</a></dd> <dd><a href="">后臺模版</a></dd> <dd><a href="">電商平臺</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市場</a></li> <li class="layui-nav-item"><a href="">社區</a></li></ul> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>默認面包屑</legend></fieldset><span class="layui-breadcrumb"> <a href="/">首頁</a> <a href="/demo/">演示</a> <a><cite>導航元素</cite></a></span><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>自定義分隔符的面包屑</legend></fieldset><span class="layui-breadcrumb" lay-separator="―"> <a href="">首頁</a> <a href="">國際新聞</a> <a href="">亞太地區</a> <a><cite>正文</cite></a></span><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>還可以用于門戶頻道的面包屑</legend></fieldset><span class="layui-breadcrumb" lay-separator="|"> <a href="">娛樂</a> <a href="">八卦</a> <a href="">體育</a> <a href="">搞笑</a> <a href="">視頻</a> <a href="">游戲</a> <a href="">綜藝</a></span><script src="layui/layui.js" charset="utf-8"></script><script>layui.use('element', function(){ var element = layui.element(); //導航的hover效果、二級菜單等功能，需要依賴element模塊 //監聽導航點擊 element.on('nav(demo)', function(elem){ //console.log(elem) layer.msg(elem.text()); });});</script> </body></html>效果圖：
官網導航欄
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
