layui导航相关--水平/垂直多级导航|面包屑导航

阅读须知:当前文档仅针对layui系列更新:2019-01-19 21:36:32 阅读量:7168 评论跟帖:0 文档整理编辑:Larry

文档导读摘要:导航菜单在后台开发以及网站前台界面中使用频率非常之高,导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符;如larryms中的顶部导航,左侧导航,面包屑导航均使用了layui的导航,另外需要注意的是,导航的自动渲染依赖于layui.element模块,虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用【具体使用中可查看本文档常用内置模块的文档介绍】

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流

我们将从用于菜单的 水平导航、垂直导航、侧边垂直导航、导航的基础属性、面包屑等方面一一介绍:【特别注意:页面中需要加载element模块】

<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></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><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script>
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;

//…
});
</script>

设定layui-this来指向当前页面分类。  导航中的其它元素 除了一般的文字导航,layui还内置了图片和徽章的支持,如:


<ul class="layui-nav">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="//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>

导航主题

通过对导航追加CSS背景类,让导航呈现不同的主题色 。

水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)  ;

垂直导航支持的其它背景主题有:layui-bg-cyan(藏青) 

//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">

</ul>

如下示例的三个不同主题的导航菜单:




垂直/侧边导航

水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:

垂直导航需要追加class:layui-nav-tree

侧边导航需要追加class:layui-nav-tree layui-nav-side

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <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="">跳转</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>
导航可选属性

对导航元素结构设定可选属性,可让导航菜单项达到不同效果。目前支持的属性如下:

属性名 可选值 说明
lay-shrink
  • 空值(默认)
    不收缩兄弟菜单子菜单
  • all
    收缩全部兄弟菜单子菜单
展开子菜单时,是否收缩兄弟节点已展开的子菜单 (注:layui 2.2.6 开始新增
如:<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul>
lay-unselect 无需填值 点击指定导航菜单时,不会出现选中效果(注:layui 2.2.0 开始新增
如:<li class="layui-nav-item" lay-unselect>刷新</li>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>

你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如: 首页 国际新闻 亚太地区 正文

<span class="layui-breadcrumb" lay-separator="-">
<a href="javascript:;">首页</a>
<a href="javascript:;">国际新闻</a>
<a href="javascript:;">亚太地区</a>
<a><cite>正文</cite></a>
</span>

当然,你还可以作为小导航来用,如: 

<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>

娱乐 八卦 体育 搞笑 视频 游戏 综艺