菜单页面隐藏和显示（JS）

最新推荐文章于 2024-01-16 10:13:57 发布

qq_47997447

最新推荐文章于 2024-01-16 10:13:57 发布

阅读量1.5k

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_47997447/article/details/120886690

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>菜单显示和隐藏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
    }

    .box {
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      position: fixed;
      top: 0;
      display: flex;
      justify-content: center;
      padding-top: 200px;
      /*开始的页面将box隐藏*/
      left: 100%;
      transition: all .3s;
    }

    .box-active {
      /*点击之后class改变了，box出现在了首页。*/
      left: 0;
      transition: all .3s;
    }

    .box > .btn {
      border: none;
      outline: none;
      background: transparent;
      position: fixed;
      right: 15px;
      top: 15px;

    }

    .box > .btn svg path {
      transition: all .3s;
    }

    .box > .active svg path {
      fill: white;
    }

    .box > .menu {
      list-style: none;

    }

    .box > .menu > li {
      width: 400px;
      height: 100px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid yellow;
      font-size: 36px;
      transition: all .3s;
      border-radius: 5%;
      margin-bottom: 8px;
    }

    .box > .menu > .option,
    .box > .menu > li:hover {
      background-color: #4ac94a;
    }

    main {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    main > div {
      display: none;
    }

    main > .option {
      display: unset;
      font-size: 36px;
    }
  </style>
</head>
<body>
<div class="box">
  <button class="btn">
<!-- svg   阿里巴巴矢量图标库-->
    <svg t="1634790504610" class="icon" viewBox="0 0 1024 1024" p-id="2403" width="48" height="48">
      <path d="M188.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z" p-id="2404"></path>
      <path d="M516.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z" p-id="2405"></path>
      <path d="M836.5 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z" p-id="2406"></path>
    </svg>
  </button>
  <ul class="menu">
    <li class="option">首页</li>
    <li>消息</li>
    <li>关于</li>
    <li>账号</li>
  </ul>
</div>
<main>
  <div class="option">首页页面</div>
  <div>消息页面</div>
  <div>关于页面</div>
  <div>账号页面</div>
</main>
<script>
// 就相当于两层页面，一层先隐藏，点击事件后就出现覆盖原来页面，在点击有隐藏
//   获取对象
  let btn = document.getElementsByClassName('btn')[0];
  let box = document.getElementsByClassName('box')[0];
  let lis = document.getElementsByTagName('li');
  var views = document.querySelector('main').children
  let isscroll = false;
  btn.onclick = () => {
    console.log(2)
    if (isscroll) {
      box.classList.remove('box-active')
      btn.classList.remove('active')
    } else {
      box.classList.add("box-active")
      btn.classList.add('active')
    }
    isscroll = !isscroll
  }
  for (let i = 0; i < lis.length; i++) {
    //发生点击事件先让全部元素的背景颜色变成空，在给指定的元素添加class给颜色。
    lis[i].onclick = () => {
      for (let j = 0; j < lis.length; j++) {
        lis[j].className = '';
        views[j].className = '';
      }
      lis[i].className = 'option'
      views[i].className = 'option'
    }
  }
</script>
</body>
</html>