006-导航相关
1. 導航一般指頁面引導性頻道集合, 多以菜單的形式呈現(xiàn), 可應用于頭部和側(cè)邊, 是整個網(wǎng)頁畫龍點晴般的存在。面包屑結(jié)構(gòu)簡單, 支持自定義分隔符。千萬不要忘了加載 element模塊。雖然大部分行為都是在加載完該模塊后自動完成的, 但一些交互操作, 如呼出二級菜單等, 需借助element模塊才能使用。
2. 導航依賴加載模塊: element。
3. 導航使用
| 名稱 | 組合 |
| 水平導航 | class="layui-nav" |
| 垂直導航 | class="layui-nav layui-nav-tree" |
| 側(cè)邊導航 | class="layui-nav layui-nav-tree layui-nav-side" |
| 導航項 | class="layui-nav-item" |
| 導航二級菜單 | class="layui-nav-child" |
| 指向當前頁面分類 | class="layui-nav-item layui-this" |
| 展開垂直菜單 | class="layui-nav-item layui-nav-itemed" |
| 圖片導航 | class="layui-nav-img" |
4. 導航主題
| 主題 | 組合 |
| 水平導航(藏青) | class="layui-nav layui-bg-cyan" |
| 水平導航(墨綠) | class="layui-nav?layui-bg-green" |
| 水平導航(艷藍) | class="layui-nav layui-bg-blue" |
| 垂直導航(藏青) | class="layui-nav?layui-nav-tree layui-bg-cyan" |
5. 導航可選屬性
5.1. 對導航元素結(jié)構(gòu)設定可選屬性, 可讓導航菜單項達到不同效果。
6. 面包屑
6.1. 使用class="layui-breadcrumb"來定義面包屑。
6.2. 面包屑中還可以通過設置屬性lay-separator="|"來自定義分隔符。
6.3. 實例
<span class="layui-breadcrumb"><a href="">首頁</a><a href="">國際新聞</a><a href="">亞太地區(qū)</a><a><cite>正文</cite></a> </span><br /><br /><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>7. 例子
7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>導航 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><ul class="layui-nav layui-bg-cyan"><li class="layui-nav-item"><a href="http://www.baidu.com">最新活動</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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li></ul><br /><br /><ul class="layui-nav layui-bg-green"><li class="layui-nav-item"><a href="">最新活動</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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li></ul><br /><br /><ul class="layui-nav layui-bg-blue"><li class="layui-nav-item"><a href="">最新活動</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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li></ul><br /><br /><ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="javascript:;">默認展開</a><dl class="layui-nav-child"><dd><a href="javascript:;">選項1</a></dd><dd><a href="javascript:;">選項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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</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><br /><br /><ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-shrink="all"><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">默認展開</a><dl class="layui-nav-child"><dd><a href="javascript:;">選項1</a></dd><dd><a href="javascript:;">選項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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</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><br /><br /><span class="layui-breadcrumb"><a href="">首頁</a><a href="">國際新聞</a><a href="">亞太地區(qū)</a><a><cite>正文</cite></a></span><br /><br /><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 type="text/javascript">layui.use('element', function(){var element = layui.element;});</script></body> </html>7.2. 效果圖
8. 側(cè)邊導航例子
8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>側(cè)邊導航 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><ul class="layui-nav layui-nav-tree layui-nav-side"><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">默認展開</a><dl class="layui-nav-child"><dd><a href="javascript:;">選項1</a></dd><dd><a href="javascript:;">選項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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</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><script type="text/javascript">layui.use('element', function(){var element = layui.element;});</script></body> </html>8.2. 效果圖
總結(jié)
