亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

layui導(dǎo)航欄實(shí)現(xiàn)代碼

 更新時(shí)間：2017年05月19日 11:28:09   作者：廣信_(tái)劉東君  
這篇文章主要為大家詳細(xì)介紹了layui導(dǎo)航欄效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了layui水平導(dǎo)航菜單的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>導(dǎo)航與面包屑</title>
    <link rel="stylesheet" href="layui/css/layui.css">
  </head>
  <body>
<fieldset class="layui-elem-field layui-field-title">
 <legend>水平導(dǎo)航菜單</legend>
</fieldset>

<ul class="layui-nav">
 <li class="layui-nav-item"><a href="">最新活動(dòng)</a></li>
 <li class="layui-nav-item layui-this">
  <a href="javascript:;">產(chǎn)品</a>
  <dl class="layui-nav-child">
   <dd><a href="">選項(xiàng)1</a></dd>
   <dd><a href="">選項(xiàng)2</a></dd>
   <dd><a href="">選項(xiàng)3</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
 <li class="layui-nav-item">
  <a href="javascript:;">解決方案</a>
  <dl class="layui-nav-child">
   <dd><a href="">移動(dòng)模塊</a></dd>
   <dd><a href="">后臺(tái)模版</a></dd>
   <dd class="layui-this"><a href="">選中項(xiàng)</a></dd>
   <dd><a href="">電商平臺(tái)</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item"><a href="">社區(qū)</a></li>
</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>垂直導(dǎo)航菜單</legend>
</fieldset>

<ul class="layui-nav layui-nav-tree" lay-filter="demo">
 <li class="layui-nav-item layui-nav-itemed">
  <a href="javascript:;">默認(rèn)展開</a>
  <dl class="layui-nav-child">
   <dd><a href="javascript:;">選項(xiàng)一</a></dd>
   <dd><a href="javascript:;">選項(xiàng)二</a></dd>
   <dd><a href="javascript:;">選項(xiàng)三</a></dd>
   <dd><a href="">跳轉(zhuǎn)項(xiàng)</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item">
  <a href="javascript:;">解決方案</a>
  <dl class="layui-nav-child">
   <dd><a href="">移動(dòng)模塊</a></dd>
   <dd><a href="">后臺(tái)模版</a></dd>
   <dd><a href="">電商平臺(tái)</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item"><a href="">云市場(chǎng)</a></li>
 <li class="layui-nav-item"><a href="">社區(qū)</a></li>
</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>側(cè)邊固定導(dǎo)航菜單</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:;">默認(rèn)展開</a>
  <dl class="layui-nav-child">
   <dd><a href="javascript:;">選項(xiàng)一</a></dd>
   <dd><a href="javascript:;">選項(xiàng)二</a></dd>
   <dd><a href="javascript:;">選項(xiàng)三</a></dd>
   <dd><a href="">跳轉(zhuǎn)項(xiàng)</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item">
  <a href="javascript:;">解決方案</a>
  <dl class="layui-nav-child">
   <dd><a href="">移動(dòng)模塊</a></dd>
   <dd><a href="">后臺(tái)模版</a></dd>
   <dd><a href="">電商平臺(tái)</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item"><a href="">云市場(chǎng)</a></li>
 <li class="layui-nav-item"><a href="">社區(qū)</a></li>
</ul> 


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>默認(rèn)面包屑</legend>
</fieldset>

<span class="layui-breadcrumb">
 <a href="/">首頁(yè)</a>
 <a href="/demo/">演示</a>
 <a><cite>導(dǎo)航元素</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="">首頁(yè)</a>
 <a href="">國(guó)際新聞</a>
 <a href="">亞太地區(qū)</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(); //導(dǎo)航的hover效果、二級(jí)菜單等功能，需要依賴element模塊

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

效果圖：

官網(wǎng)導(dǎo)航欄

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論