如何用CSS和jQuery实现桌面侧边菜单在移动端点击展开带蒙版效果

实现逻辑 #

• 新增半透明蒙版元素，菜单展开时覆盖正文内容区域
• 为外层容器.demo添加状态类open，移动端下通过该类同时控制菜单高度、蒙版显隐
• 绑定点击事件实现菜单展开/收起切换，点击蒙版区域也可收起菜单

代码修改 #

HTML部分 #

在原有.demo容器内新增蒙版元素即可，其余代码保持不变：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <ul class="side">
    <li>
      <a class="side_item" href="javaScript:;">ABOUT</a>
    </li>
    <li>
      <a class="side_item" href="javaScript:;">SERVICE</a>
    </li>
     <li>
      <a class="side_item" href="javaScript:;">CONTACT</a>
    </li>
  </ul>
  <!-- 新增蒙版元素 -->
  <div class="mask"></div>
  <div class="content">
    <!-- 原有正文内容保持不变 -->
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium atque accusantium soluta blanditiis in architecto ex ducimus? Alias sed quibusdam cumque autem eos rem! Amet dolore dolor totam voluptate sed at dolores saepe, nam quibusdam eos, molestiae animi quaerat perferendis, fugit accusantium debitis magni mollitia earum quia! Fugit reprehenderit dolor hic impedit debitis, maiores tempora eius natus veritatis vel totam vitae corrupti quaerat recusandae repudiandae perspiciatis odio eligendi laboriosam culpa aspernatur necessitatibus. Inventore dicta pariatur adipisci natus voluptate vero eius dolor, nihil modi ratione amet quos beatae repellendus voluptates praesentium porro unde exercitationem quisquam aliquam non? Ab dolore magnam ad a voluptatibus tempora tempore ipsam itaque aliquid optio? Autem placeat veniam doloribus dolorem consectetur voluptates architecto laboriosam magni nisi pariatur corrupti minus, unde molestiae deserunt dolores rem necessitatibus quasi sed dicta? Eveniet natus itaque, ad beatae id pariatur vel ex quo reiciendis consequuntur at expedita minima earum tenetur a ducimus quam aut repellendus possimus eos omnis. Numquam officiis quisquam recusandae repellat eius tempora, velit esse, laborum nemo, similique unde sed? Dolorem tempore et beatae in facere dignissimos fugit, quam fugiat inventore nihil quaerat esse impedit ex nobis at a molestiae neque amet consequatur soluta quidem. Reprehenderit delectus amet magnam sint.
  </div>
</div>

CSS部分 #

替换原有CSS代码，补充移动端适配规则、蒙版样式和过渡动画：

body {
  background-color: #ccc;
  margin: 0;
  padding: 10px;
}
.demo {
  display: flex;
}
.demo .side {
  flex: 1;
  background-color: #fff;
  border-radius: 10px;
  list-style: none;
  padding: 0;
  margin: 0 10px 0 0;
}
.demo .side .side_item {
  display: block;
  color: #222;
  text-align: center;
  text-decoration: none;
  padding: 30px;
  border-bottom: 1px solid #ccc;
}
.demo .content {
  flex: 2;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}
/* 移动端适配规则 */
@media (max-width: 768px) {
  body {
    padding: 0;
  }
  .demo {
    display: block;
  }
  .demo .side {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    height: 72px;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 0;
    margin: 0;
  }
  /* 菜单展开状态样式 */
  .demo.open .side {
    height: auto;
    min-height: 100vh;
  }
  .demo .content {
    padding-top: 82px;
    border-radius: 0;
  }
  /* 蒙版样式 */
  .mask {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
    display: none;
  }
  .demo.open .mask {
    display: block;
  }
}

jQuery部分 #

替换原有错误的JS代码，实现点击交互逻辑：

$(function() {
  // 点击侧边栏切换菜单展开/收起状态
  $('.side').on('click', function() {
    $('.demo').toggleClass('open');
  });
  // 点击蒙版收起菜单
  $('.mask').on('click', function() {
    $('.demo').removeClass('open');
  });
});

效果预览 #

• 桌面端效果
  
• 移动端效果
  

内容的提问来源于stack exchange，提问作者AWEI