继上一篇文章【前端】侧边栏显示隐藏的实现和动画效果
发现了一个bug：当展开侧边栏，拉大窗口（大尺寸的窗口状态是不显示侧边栏控制按钮的），于是这个侧边栏就回不去了。
于是我想到了一个办法，增加一个遮罩层。使页面侧边栏展开时，除了侧边栏，便是遮罩层。点击遮罩层，则隐藏侧边栏。
HTML关键代码如下
<!--遮罩层--> <div class="mubu" id="mubu" onclick="menuNotShow();return false;"> <!--侧边栏--> </div> <div class="box-left-menu" id="left-menu"> <div class="title"> 萌狼工作室 <hr> </div> <div> <ul> <li><a href="#">首页</a></li> <li><a href="#">资源</a></li> <li><a href="#">网站</a></li> <li><a href="#">关于</a></li> </ul> </div> </div>
相关CSS样式
header .box-left-menu{ /*从文档流完全删除，并相对于其包含块定位*/ position: absolute; left:-10em; top:0; z-index:9999; width:10em; height: 100%; background-color: var(--background-color); box-shadow: 1px 1px 1px 1px var(--shadow-color); /*transition: transition-property transition-duration transition-timing-function transition-delay;*/ transition: all 0.7s ease 0ms; opacity: 0; }
header .mubu{ position: absolute; width: 100%; height: 100%; /*优先级比左侧菜单栏低一级*/ z-index:9998; background-color: var(--shadow-color); opacity: 0; }
相关js
function menuShow(){ let item = document.getElementById("left-menu"); let mubu = document.getElementById("mubu"); if(item.style.left==="0px"){ item.style.left="-10em" item.style.opacity="0" mubu.style.opacity="0" }else{ item.style.left="0px" item.style.opacity="1" mubu.style.opacity="1" } } function menuNotShow(){ let item = document.getElementById("left-menu"); let mubu = document.getElementById("mubu"); item.style.left="-10em" item.style.opacity="0" mubu.style.opacity="0" }
