左侧菜单栏左滑收起展开效果

2023-08-24 12:17| 来源: 网络整理| 查看: 265

上一篇文章左侧菜单栏折叠展开效果-超级简单介绍了将菜单列表上下展开的效果，这里在上一篇文章的基础上增加了左右折叠展开，有时候左侧菜单可能占了屏幕的一部分宽度，我们想把左侧菜单栏收缩起来以此让右边可视区域变大，就可以参考这篇文章的效果啦。效果图如下：

一：页面结构：

首页菜单1 子菜单1-1 子菜单1-2 子菜单1-3 子菜单1-4 菜单2 子菜单2-1 子菜单2-2 子菜单2-3 菜单3 子菜单3-1 子菜单3-2

二：页面样式css，放在head标签里

*{ margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; } html,body{ height: 100%; } a, a:hover, a:focus { text-decoration: none; color: #262626; } .i-icon{ display: inline-block; } .go-back{ padding-top: 50px; text-align: center; } .window-left.fold{ overflow: visible!important; } .window-left{ position:relative; float:left; width:200px; height:100%; overflow: hidden; background-color: #e8e9ec; } .window-left.fold{ overflow: visible!important; } .window-left .go-back a{ display: inline-block; width: 160px; height: 30px; line-height: 30px; border-radius: 15px; border: solid 1px #7e84b1; text-align: center; } .window-left .go-back a .i-icon{ width: 30px; height: 30px; margin: 0 auto; background-image: url("image/left-arrow.png"); } .window-left.fold .go-back a{ width: 30px; height: 30px; border-radius: 15px; border: solid 1px #7e84b1; } .window-left.fold .go-back a .i-icon{ background-image: url("image/right-arrow.png"); } .window-left .go-back{ text-align: center; } .window-left .menu-list{ padding-top:20px; font-size:18px; } .window-left .menu-list ul{ list-style: none; padding:0; margin:0 auto; } .window-left .menu-list ul li{ text-align:left; color: #616c82; } .window-left .menu-list ul li.first-menu{ position: relative; color: #5f78a2; } .window-left .menu-list>ul>li .i-icon{ width: 24px; height: 24px; vertical-align: sub; background-image: url("image/menu.png"); } .window-left .menu-list ul li:HOVER>span{ color: #1c9dff; cursor: pointer; } .window-left .menu-list ul li a{ display:block; } .window-left .menu-list ul li.first-menu>a{ position: relative; padding-left: 15px; width: 100%; line-height: 50px; white-space: nowrap; } .window-left .menu-list ul li.first-menu .hover-tit{ display: block; position: absolute; left: 55px; top:13px; width: 140px; } .window-left.fold .menu-list ul li.first-menu .hover-tit{ display: none; width: 180px; height: 50px; left: 60px; line-height: 50px; padding-left: 20px; background-color: #bfbcbc; color: #646567; cursor: Default; } .window-left.fold .menu-list ul li.first-menu:hover{ background-color: #bfbcbc; } .window-left.fold .menu-list ul li.first-menu:hover .hover-tit{ display: block!important; top:0; } .window-left.fold .menu-list ul li.first-menu:hover ul{ display: block!important; position: absolute; width: 180px; top:50px; left: 60px; } .window-left.fold .menu-list ul li.first-menu:hover ul li{ height: 45px; border-top: 1px solid #35395f; background-color: #bfbcbc; } .window-left.fold .menu-list ul li.first-menu:hover ul li a{ width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .window-left .menu-list ul li.first-menu.active>span{ color: #1c9dff; } .window-left .menu-list ul li.first-menu.active ul li.second-menu.current a{ background-color: #bfbcbc;; border-left: 4px solid #101213; font-size: 16px; } .window-left .menu-list ul li.first-menu ul{ display:none; } .window-left .menu-list ul li.first-menu ul li.second-menu a{ padding: 12px 0 12px 55px; font-size:16px; color: #28292b; } .window-left.fold .menu-list ul li.first-menu ul li.second-menu a{ padding-left: 20px; font-size:16px; color: #020e23; }

三：js代码：

$(function(){ $(".menu-list .first-menu").click(function(){ $(this).addClass("active").siblings().removeClass("active"); if(!$(".window-left").hasClass('fold')){ $(this).find("ul").slideToggle(500); $(this).siblings().find("ul").hide(); } }) $(".menu-list .second-menu").click(function(){ var $this = $(this); $(".second-menu").each(function () { if($(this).hasClass("current")){ $(this).removeClass("current"); } }) $this.addClass("current").siblings().removeClass("current"); $this.parents(".first-menu").addClass("active").siblings().removeClass("active") }) /*阻止事件冒泡*/ $(".menu-list .first-menu ul").bind("click",function(event){ event.stopPropagation(); }); $(".go-back a").click(function () { $(".menu-list .first-menu").find("ul").hide(); //收起状态 if($(".window-left").hasClass('fold')){ $(".window-left").animate({width:"200px"},300,'swing'); $(".window-left").removeClass('fold'); }else{ $(".window-left").animate({width:"60px"},300,'swing'); $(".window-left").addClass('fold') } }) })

关于菜单折叠收起绑定事件有不明白的可以参考上一篇文章，这里写了两套样式，因为展开状态和折叠状态下子菜单的位置及样式不一样，所以当我们点击展开折叠图标时添加移除元素类名就可以，并且添加菜单栏展开和折叠宽度变化时的动画，采用jquery的animate方法。原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe 95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。欢迎留言交流

【本文地址】

公司简介

联系我们