如何使汉堡菜单在打开时覆盖整个视口

问题描述 投票：0回答：1

我有一个仅使用 CSS 的工作汉堡菜单。我的问题是我希望菜单在打开时填满整个屏幕。当它打开时，我页面中的所有内容都会显示在菜单下方，如下所示：

我希望它看起来像这样：

我尝试将 

min-height: 100vh
添加到 CSS 中的所有不同类中。

.header {
  overflow: hidden;
  width: 100%;
  z-index: 3;
  background-color: #202124;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header li {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

.header ul a {
  display: block;
  padding: 5px 20px;
  text-decoration: none;
}

.header ul a:hover {
  color: #BDBDBD;
}

.header .logo {
  float: left;
  display: block;
  font-size: 1.5em;
  padding: 10px 20px;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.header .menu-icon .nav-icon {
  background: #cccccc;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}

.header .menu-icon .nav-icon:after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
  transform: rotate(45deg);
  top: 0;
}

@media (min-width:48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
<header class="header">
  <a href="/" class="logo"><span class="logo-yellow">L</span><span class="logo-green">K</span></a>
  
  <input class="menu-btn" type="checkbox" id="menu-btn">
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

html css navigation display
1个回答
0
投票
<head>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .header {
    overflow: hidden;
    width: 100%;
    z-index: 3;
    background-color: #202124;
  }

  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header li {
    color: #ffffff;
    font-weight: 700;
    font-size: 22px;
  }

  .header ul a {
    display: block;
    padding: 5px 20px;
    text-decoration: none;
  }

  .header ul a:hover {
    color: #BDBDBD;
  }

  .header .logo {
    float: left;
    display: block;
    font-size: 1.5em;
    padding: 10px 20px;
  }

  .header .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #202124;
    list-style: none;
    text-align: center;
    overflow-y: auto;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .menu li {
    display: block;
    padding: 20px 0;
  }

  .header .menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
  }

  .header .menu a:hover {
    color: #BDBDBD;
  }

  .header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #cccccc;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
  }

  .header .menu-icon .nav-icon:before {
    background: #cccccc;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 5px;
  }

  .header .menu-icon .nav-icon:after {
    background: #cccccc;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -5px;
  }

  .header .menu-btn {
    display: none;
  }

  .header .menu-btn:checked~.menu {
    max-height: 100%;
  }

  .header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
  }

  .header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
  }

  .header .menu-btn:checked~.menu-icon .nav-icon::after {
    transform: rotate(45deg);
    top: 0;
  }

  @media (min-width:48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      float: right;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }
  }
</style>
</head>
<body>
  <header class="header">
    <a href="/" class="logo"><span class="logo-yellow">L</span><span class="logo-green">K</span></a>
    
    <input class="menu-btn" type="checkbox" id="menu-btn">
    <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
    
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Browse</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </header>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.