91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

layui導航欄實現代碼

發布時間:2020-09-23 13:39:48 來源:腳本之家 閱讀:193 作者:廣信_劉東君 欄目:web開發

本文實例為大家分享了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>

效果圖:

layui導航欄實現代碼

官網導航欄

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

霍林郭勒市| 东乡县| 乃东县| 永和县| 万荣县| 镇巴县| 方正县| 乐业县| 淅川县| 博白县| 夏邑县| 苏尼特右旗| 札达县| 江油市| 株洲市| 乐安县| 买车| 玉门市| 安岳县| 黄石市| 南投市| 台江县| 额尔古纳市| 洞头县| 宜兰县| 土默特右旗| 瑞丽市| 英吉沙县| 什邡市| 青铜峡市| 信丰县| 鄱阳县| 盈江县| 易门县| 六枝特区| 阿克苏市| 镶黄旗| 固镇县| 依兰县| 磴口县| 门源|