layui水平导航条三级

最新推荐文章于 2022-07-17 23:45:07 发布

weixin_30883311

最新推荐文章于 2022-07-17 23:45:07 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LYF1997/p/10556603.html

版权

本文介绍如何使用layui框架创建一个包含三级菜单的水平导航条。内容包括需求描述、展示效果以及具体实现的HTML和JS代码。在展开时，二级和三级菜单会一同展开，提供良好的用户体验。

摘要由CSDN通过智能技术生成

需求

需要做一个顶部的水平导航条，有三级，展开的时候二级和三级一起展开，结果如图：

效果

一级菜单
- 二级标题
- 三级菜单
- 三级菜单
- 二级标题
- 三级菜单
- 三级菜单
一级菜单
- 二级标题
- 三级菜单
- 三级菜单
- 三级菜单
- 二级标题
- 三级菜单
- 我是独特的三级菜单
- 三级菜单
- 二级标题
- 三级菜单
- 三级菜单
一级菜单
- 我上面的二级标题呢
- 我是三级

代码

下面贴上代码：

HTML代码

<div class="layui-header">
　　<ul id="moudleMenu" class="layui-nav layui-layout-left kit-nav">
　　　　<li class="layui-nav-item nav-custom"><a href="javascript:;">一级菜单</a>
　　　　　　<div class="layui-nav-child layui-anim layui-anim-upbit">
　　　　　　　　<ul style="float: left; text-align: center; color: black; margin: 0;">
　　　　　　　　　　<li>
　　　　　　　　　　　　<span>二级标题</span>
　　　　　　　　　　　　<!-- 标题下面的线 -->
　　　　　　　　　　　　<div style="height: 1px; background-color: #1e9fff; width: 90%; margin: 0 auto;">&nbsp;</div>
　　　　　　　　　　</li>
　　　　　　　　　　<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
　　　　　　　　　　<li><a style="padding: 0;" href="'javascript:void(0);"><span>三级菜单</span></a></li>
　　　　　　　　</ul>
　　　　　　　　<ul style