来了老弟，二级菜单栏

最新推荐文章于 2023-08-09 10:09:56 发布

小渝学长

最新推荐文章于 2023-08-09 10:09:56 发布

阅读量328

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 插件文章标签： layui

本文链接：https://blog.youkuaiyun.com/weixin_44548718/article/details/90896043

本文介绍了如何利用layui插件创建二级菜单导航。通过引入layui的必要文件，使用HTML的ul、li、dl、dd标签布局，配合layui的样式类实现不同颜色的水平导航。同时，展示了侧边导航的代码实现，并指出layui的element模块对于导航功能的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信大家在编写的那些系统上都是会需要一个菜单导航栏，因为这样会使得在查看页面的时候变得更加的方便，看起来还美观了不少！

好了，下面我们就开始来具体说下吧

首先我们这次分享的是通过layui插件来实现的二级的菜单导航

1.先把layui所需要的两个插件给引入你的项目

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

2.然后再HTML上编写样式代码，下面的代码是水平导航来的哈

1.	<ul class="layui-nav" lay-filter="">
2.	<li class="layui-nav-item"><a href="">首页</a></li>
3.	<li class="layui-nav-item layui-this"><a href="">资讯</a></li>
4.	<li class="layui-nav-item"><a href="">新闻</a></li>
5.	<li class="layui-nav-item">
6.	<a href="javascript:;">概况</a>
7.	<dl class="layui-nav-child"> <!-- 二级菜单 -->
8.	<dd><a href="">移动模块</a></dd>
9.	<dd><a href="">后台模版</a></dd>
10.	<dd><a href="">电商平台</a></dd>
11.	</dl>
12.	</li>
13.	<li class