溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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" >
<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" >
<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" >
<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" >
<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" >
<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>
效果圖：
官網導航欄
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
