【免费】layui侧边收缩菜单_layuimenu收起,layui侧边栏收缩资源-CSDN文库

共106个文件

gif：75个

js：18个

css：5个

4星 · 超过85%的资源需积分: 0 196 浏览量 2021-02-02 09:56:26 上传评论 1 收藏 579KB ZIP 举报

layui是一款流行的前端UI框架，它提供了丰富的组件和样式，用于构建现代、响应式的Web应用。在layui中，侧边收缩菜单是一项重要的功能，它能够帮助优化网页布局，提高用户体验。当我们点击图标时，菜单可以进行收缩或展开，使得页面在不同屏幕尺寸下都能保持良好的可读性和操作性。我们要理解layui的结构。layui的核心是模块化设计，它包含了一系列独立的模块，如form、table、element等，这些模块可以单独引入并组合使用。对于侧边收缩菜单，主要涉及到layui的layout模块和element模块。 `index.html`是我们的主HTML文件，它会引入layui的相关CSS和JS文件。在HTML结构中，我们会创建一个侧边栏（通常是一个`div`元素），然后在这个侧边栏内部添加菜单项。这些菜单项可以是链接、按钮或者其他自定义元素，关键在于它们需要绑定对应的layui事件来实现收缩和展开的功能。例如，我们可以这样设置HTML结构： ```html <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="side">  </ul> </div> </div> ``` 接下来，我们使用layui的JavaScript API来实现菜单的交互。layui的element模块提供了对页面元素的控制，包括折叠和展开。我们可以在文档加载完成后，通过监听侧边栏的点击事件来触发相应的收缩或展开动作： ```javascript layui.use(['element', 'layer'], function() { var element = layui.element; var layer = layui.layer; // 监听侧边栏的点击事件 $('.layui-nav-tree').on('click', 'li', function() { // 判断当前元素是否有展开/收缩的子菜单 if ($(this).children('.layui-nav-child').length) { // 如果有，执行收缩或展开操作 element.foldOrUnfold(this); // 可以添加一些动画效果，比如淡入淡出 } }); }); ``` 在`index.html`中，可能还包含了`左侧栏效果11.jpg`这样的图片资源，这通常是用来展示侧边栏收缩或展开前后的视觉效果，帮助开发者理解预期的界面状态。至于`lib`文件夹，它通常包含layui框架的基础库文件，如layui.css、layui.js等。这些文件是layui框架运行所必需的，需要在HTML中正确引入，以确保所有功能正常工作。 layui侧边收缩菜单的实现涉及到HTML结构设计、layui模块的使用，以及JavaScript事件处理。通过合理布局和有效的交互设计，我们可以创建一个既美观又实用的侧边栏菜单，适应各种设备和用户需求。

资源详情

资源评论

资源推荐

收起资源包目录

layui侧边收缩菜单（106个子文件）

layui.css 59KB

layer.css 14KB

layui.mobile.css 10KB

laydate.css 7KB

code.css 1KB

iconfont.eot 40KB

59.gif 10KB

22.gif 10KB

24.gif 8KB

13.gif 7KB

16.gif 7KB

39.gif 6KB

64.gif 6KB

63.gif 6KB

50.gif 6KB

loading-0.gif 6KB

4.gif 6KB

1.gif 5KB

42.gif 5KB

71.gif 5KB

21.gif 5KB

20.gif 5KB

29.gif 5KB

70.gif 4KB

5.gif 4KB

17.gif 4KB

27.gif 4KB

9.gif 4KB

44.gif 4KB

11.gif 4KB

8.gif 4KB

3.gif 4KB

23.gif 4KB

34.gif 4KB

41.gif 4KB

38.gif 4KB

65.gif 3KB

32.gif 3KB

45.gif 3KB

7.gif 3KB

12.gif 3KB

26.gif 3KB

60.gif 3KB

2.gif 3KB

40.gif 3KB

25.gif 3KB

19.gif 3KB

66.gif 3KB

18.gif 3KB

46.gif 3KB

10.gif 3KB

28.gif 3KB

51.gif 3KB

57.gif 3KB

67.gif 3KB

0.gif 3KB

48.gif 3KB

43.gif 3KB

30.gif 2KB

61.gif 2KB

33.gif 2KB

69.gif 2KB

14.gif 2KB

47.gif 2KB

36.gif 2KB

49.gif 2KB

58.gif 2KB

6.gif 2KB

54.gif 2KB

53.gif 2KB

56.gif 2KB

62.gif 2KB

31.gif 2KB

55.gif 2KB

35.gif 2KB

15.gif 2KB

loading-2.gif 2KB

37.gif 1KB

68.gif 1KB

52.gif 777B

loading-1.gif 701B

index.html 7KB

左侧栏效果11.jpg 16KB

layui.all.js 222KB

jquery.js 95KB

mobile.js 33KB

laydate.js 27KB

layer.js 22KB

table.js 20KB

layedit.js 12KB

form.js 8KB

element.js 7KB

upload.js 7KB

layui.js 6KB

laypage.js 4KB

carousel.js 4KB

tree.js 3KB

util.js 2KB

flow.js 2KB

laytpl.js 2KB

共 106 条

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" href="lib/layui/css/layui.css"> <script src="lib/layui/layui.js"></script> <style> em, i { font-style: normal; } .nav-tree-main .layui-nav-item > a i { margin-right: 10px; } .nav-tree-main .layui-nav-item > .layui-nav-child dd a { padding-left: 40px; } #menuBar { cursor: pointer; color: #fff; position: absolute; left: 0; top: 0; margin: 22px; } .layui-layout-admin .layui-logo { left: 64px; text-align: left; color: #fff; } /* 左侧栏 *** 向左折叠 mini-sidebar */ .mini-sidebar .layui-layout-admin .layui-side { width: 48px; overflow-x: visible; } .mini-sidebar .layui-layout-admin .layui-side:hover .layui-side-scroll { width: 268px; } .mini-sidebar .nav-tree-main .layui-side-scroll { width: 48px; overflow-x: initial; } .mini-sidebar .nav-tree-main.layui-nav-tree { width: 48px !important; } .mini-sidebar .nav-tree-main.layui-nav-tree .layui-nav-item { position: relative; } .mini-sidebar .nav-tree-main > .layui-nav-item > .layui-nav-child { position: absolute; left: 48px; top: 0; width: 200px; background-color: rgba(57,61,73,.9)!important;display: none; z-index: 9999;border-radius: 0; } .mini-sidebar .nav-tree-main > .layui-nav-item > .layui-nav-child dd a { line-height: 40px; text-align: left; padding: 0 20px; color: #fff; } .mini-sidebar .nav-tree-main > .layui-nav-item:hover > .layui-nav-child { display: block; } .mini-sidebar .nav-tree-main > .layui-nav-item a { padding: 10px 0 0 0; line-height: 15px; text-align: center; } .mini-sidebar .nav-tree-main > .layui-nav-item > a > .sideIcons { margin: 0 auto; } .mini-sidebar .nav-tree-main .icon { line-height: 12px; } .mini-sidebar .nav-tree-main > .layui-nav-item a > .cite { display: block; line-height: 12px; padding-top: 5px; font-size: 12px; } .mini-sidebar .nav-tree-main > .layui-nav-item .cite em { display: none; } .mini-sidebar .nav-tree-main > .layui-nav-item .layui-nav-child dd .cite{ line-height:40px; padding:0;} .mini-sidebar .nav-tree-main > .layui-nav-item > a .layui-nav-more { display: none; } .mini-sidebar .nav-tree-main .sub-nav .layui-nav-item a { line-height: 40px; text-align: left; padding: 0 20px; color: #b4bcc8; } .mini-sidebar .nav-tree-main .sub-nav .layui-nav-item .layui-nav-more { display: block; } .mini-sidebar .layui-body { left: 48px; } .mini-sidebar .nav-tree-main .layui-nav-item > a i{ margin:0 auto;} /*右侧*/ .layui-fluid{ padding:15px;} .wMain-col-bg1,.wMain-col-bg2{background: #79C48C; text-align: center; padding:24px; color: #fff;} .wMain-col-bg2{background: #63BA79;} </style> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header header"> <a href="javascript:;">  <i class="layui-icon layui-icon-shrink-right" id="menuBar"></i> </a> <div class="layui-logo">后台管理</div> </div> <div class="layui-side layui-bg-black leftMenuDiv"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree nav-tree-main" lay-shrink="all"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;"><i class="layui-icon"></i><span class="cite">文件<em>内容</em></span></a> <dl class="layui-nav-child"> <dd><a href="javascript:;"><span class="cite">文件管理</span></a> <dl class="layui-nav-child"> <dd><a href="javascript:;">三级</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">四级</a></dd> <dd><a href="javascript:;">四级</a></dd> </dl> </dd> <dd><a href="javascript:;">三级</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">四级</a></dd> <dd><a href="javascript:;">四级</a></dd> </dl> </dd> <dd><a href="javascript:;">三级</a></dd> </dl> </dd> <dd><a href="javascript:;"><span class="cite">文件管理2</span></a></dd> <dd><a href="javascript:;"><span class="cite">文件管理3</span></a></dd> <dd><a href="javascript:;"><span class="cite">文件管理4</span></a></dd> </dl> </li> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;"><i class="layui-icon"></i><span class="cite">图片<em>内容</em></span></a> <dl class="layui-nav-child"> <dd><a href="javascript:;"><span class="cite">图片管理</span></a></dd> <dd><a href="javascript:;"><span class="cite">图片管理2</span></a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body"> <div class="layui-fluid"> <div class="layui-row"> <div class="layui-col-md9 wMain-col-bg1"> 你的内容 9/12 </div> <div class="layui-col-md3 wMain-col-bg2"> 你的内容 3/12 </div> </div> </div> </div> </div> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form', 'element'], function () { var layer = layui.layer , form = layui.form , $ = layui.jquery; $(function () { // 左侧栏向左折叠 $("#menuBar").on('click', function () { if ($("body").hasClass("mini-sidebar")) { $("body").removeClass("mini-sidebar"); $(this).addClass("layui-icon-shrink-right"); $(this).removeClass("layui-icon-spread-left"); } else { $("body").addClass("mini-sidebar"); $(this).removeClass("layui-icon-shrink-right"); $(this).addClass("layui-icon-spread-left"); } }); }) }); </script> </body> </html>