Layui 導(dǎo)航

依賴于模塊:element

layui-nav layui-nav-item

layui-this

layui-nav-item layui-nav-child

image.png

<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活動(dòng)</a></li>
<li class="layui-nav-item layui-this"><a href="">產(chǎn)品</a></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><a href="">電商平臺(tái)</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社區(qū)</a></li>
</ul>

<script>
//注意:導(dǎo)航 依賴 element 模塊,否則無法進(jìn)行功能性操作
layui.use('element', function(){
var element = layui.element;

//…
});
</script>

徽章,圖片導(dǎo)航

layui-badge layui-badge-dot layui-nav-img

image.png

<ul class="layui-nav">
<li class="layui-nav-item">
<a href="">控制臺(tái)<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">個(gè)人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul>

導(dǎo)航加背景色 layui-bg-green

image.png

//如定義一個(gè)墨綠背景色的導(dǎo)航
<ul class="layui-nav layui-bg-green" lay-filter="">

</ul>

側(cè)邊欄導(dǎo)航欄

image.png

<ul class="layui-nav layui-nav-tree" lay-filter="test">

<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)1</a></dd>
<dd><a href="javascript:;">選項(xiàng)2</a></dd>
<dd><a href="">跳轉(zhuǎn)</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ǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>

其他屬性

image.png

面包屑;layui-breadcrumb

<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">國(guó)際新聞</a>
<a href="">亞太地區(qū)</a>
<a><cite>正文</cite></a>
</span>


image.png

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 講真,從來沒有料到自己能把洛神賦臨摹完(甚至還有十幾個(gè)字重復(fù)了^_^)。
    三葉螺旋槳閱讀 244評(píng)論 1 1
  • 而引發(fā)VC圈關(guān)注的是,這家公司經(jīng)營(yíng)范圍明確地寫著:創(chuàng)業(yè)投資業(yè)務(wù)。 科技巨頭涉足創(chuàng)投并非新鮮事,前有騰訊、阿里等,后...
    丁勇_08ea閱讀 615評(píng)論 0 0
  • 甘愿平凡,甘愿簡(jiǎn)單,甘愿澄澈明凈,但是你記住,以上都是我自己的事情,與你無關(guān),你毋須評(píng)說,也無權(quán)躑躅,個(gè)人修個(gè)人果。
    簡(jiǎn)疏J閱讀 171評(píng)論 0 0
  • 誰要看了覺得有用可以給我打賞啊,ETH地址:0x8C23919054E6d5635a09B8c79C2000FB3...
    老魚_chaimyu閱讀 1,072評(píng)論 0 1

友情鏈接更多精彩內(nèi)容