-
水平导航 默认 引入css
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <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>
无hover现象 鼠标还未引入element layui.use(["element"],function(){})
-
垂直多了一个layui-nav-tree 类 ul中加
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>垂直导航菜单</legend> </fieldset> <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;"> <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> <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" 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> -
样式 layui-nav 导航菜单
-
layui-nav-item 代表导航菜单的一个子项
* layui-nav-child 子项目的子项 -
layui-this 代表导航当前选中菜单项 默认选中哪个就在哪里加入layui-this
导航带徽章和图片
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>导航带徽章和图片</legend>
</fieldset>
<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" lay-unselect="">
<a href="javascript:;"><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/5/13/1720ea94db39bbdd~tplv-t2oaga2asx-image.image" 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>
位置在最左边 最后一个li上加入float:right
不同的类名不同的主题色
- layui-bg-cyan
- layui-bg-green
- layui-bg-blue
面包屑
-
默认
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <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" style="margin-top: 50px;"> <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" 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>
直接左边加竖杠一句话p标签
<p class="layui-elem-quote">其实就是自定义了个“|”的分隔符，然后最后一项也可以点。</p>
