layui導航欄實現(xiàn)代碼

本文實例為大家分享了layui水平導航菜單的具體代碼，供大家參考，具體內容如下

創(chuàng)新互聯(lián)建站是一家以網絡技術公司，為中小企業(yè)提供網站維護、成都網站設計、成都做網站、網站備案、服務器租用、申請域名、軟件開發(fā)、小程序制作等企業(yè)互聯(lián)網相關業(yè)務，是一家有著豐富的互聯(lián)網運營推廣經驗的科技公司，有著多年的網站建站經驗，致力于幫助中小企業(yè)在互聯(lián)網讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網上打開一個面向全國乃至全球的業(yè)務窗口：建站溝通電話：028-86922220

<!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="">社區(qū)</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="">社區(qū)</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="">社區(qū)</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="">亞太地區(qū)</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模塊

 //監(jiān)聽導航點擊
 element.on('nav(demo)', function(elem){
  //console.log(elem)
  layer.msg(elem.text());
 });
});
</script>
  </body>
</html>

效果圖：

layui導航欄實現(xiàn)代碼

官網導航欄

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前文章：layui導航欄實現(xiàn)代碼
文章源于：http://jinyejixie.com/article38/pspspp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供移動網站建設、全網營銷推廣、品牌網站制作、服務器托管、品牌網站設計、商城網站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

layui導航欄實現(xiàn)代碼