汉堡菜单（仅 css）不可点击

Question

我仅使用 css 创建了一个汉堡菜单

/*based on this*/ <input type="checkbox" class="toggler">

并且切换按钮不可点击

（我搜索了很多，大多数 questions/answers/problems 处理基于 js/jquery 的汉堡菜单）

教程https://www.youtube.com/watch?v=DZg6UfS5zYg

Whosebug 上的类似代码

我添加了视频背景

代码

:root {
    --primary-color: rgba(13, 110, 139, 0.75);
    --overlay-color: rgba(24, 39, 51, 0.85);
    --menu-speed: 0.75s;
}

*{
    box-sizing: border-box;
  }
  
  body{
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:1rem;
    font-weight:normal;
    line-height:1.5;
    color:#333;
    overflow-x:hidden;
  }
  
  .v-header{
    height:100vh;
    display:flex;
    align-items:center;
    color:#fff;
  }
  
  .container{
    max-width:960px;
    padding-left:1rem;
    padding-right:1rem;
    margin:auto;
    text-align:center;
  }
  
  .fullscreen-video-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow:hidden;
  }
  
  .fullscreen-video-wrap video{
    min-height:100%;
    min-width:100%;
  }
  
  .header-overlay{
    height:100vh;
    position: absolute;
    top:0;
    left:0;
    width:100vw;
    z-index:1;
    background:#fffcb7;
    opacity:0.65;
  }
  
  .header-content{
    z-index:2;
  }
  
  .header-content h1{
    font-size:50px;
    margin-bottom:0;
  }
  
  .header-content p{
    font-size:1.5rem;
    display:block;
    padding-bottom:2rem;
  }
  
  .btn{
    background: #34b3a0;
    color:#fff;
    font-size:1.2rem;
    padding: 1rem 2rem;
    text-decoration: none;
  }
  
  .section{
    padding:20px 0;
  }
  
  .section-b{
    background:#333;
    color:#fff;
  }
  
  @media(max-width:960px){
    .container{
      padding-right:3rem;
      padding-left:3rem;
    }
  }

.menu-wrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.menu-wrap .toggler{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
}

.menu-wrap .hamburger{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: var(--primary-color) ;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/*Hamburger Line*/
.menu-wrap .hamburger > div{
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
 /* top and bottom lines*/
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;
}

/* Moves line down */
.menu-wrap .hamburger > div:after {
    top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
    transform: rotate(135deg);
    z-index: 1;
  }
  
  /* Turns Lines Into X */
  .menu-wrap .toggler:checked + .hamburger > div:before,
  .menu-wrap .toggler:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
  }
  
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
    transform: rotate(225deg);
  }
  
  /* Show Menu */
  .menu-wrap .toggler:checked ~ .menu {
    visibility: visible;
  }
  
  .menu-wrap .toggler:checked ~ .menu > div {
    transform: scale(1);
    transition-duration: var(--menu-speed);
  }
  
  .menu-wrap .toggler:checked ~ .menu > div > div {
    opacity: 1;
    transition:  opacity 0.4s ease 0.4s;
  }
  
  .menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .menu-wrap .menu > div {
    background: var(--overlay-color);
    border-radius: 50%;
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.4s ease;
  }
  
  .menu-wrap .menu > div > div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .menu-wrap .menu > div > div > ul > li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
  }
  
  .menu-wrap .menu > div > div > ul > li > a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu.css">
    <title>blog</title>
</head>
<body>
   <div class="menu-wrap">
       <input type="checkbox" class="toggler">
       <div class="hamburger"><div></div></div>
       <div class="menu">
           <div>
               <div>
                   <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Blog</a></li>
                       <li><a href="#">About</a></li>
                       <li><a href="#">Contact</a></li> 
                   </ul>
               </div>
           </div>
       </div>
   </div>
   <input type="checkbox" class="toggler">
    <header class="v-header container">
        <div class="fullscreen-video-wrap">
            <video src="video.mp4" autoplay="true" loop="true"></video>
        </div>
        <div class="header-overlay"></div>
        <div class="header-content">
            <h1>Welcome</h1>
            <p> welcome to the world of life and every
                minute detail of being you and the best version of your being
                
            </p>
            <a href="#" class="btn"> Read More</a>
        </div>
    </header>
</body>
</html>

Answer 1

将 .menu-wrap 更改为以下内容：

.menu-wrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

Answer 2

您的 header 叠加层覆盖了您的按钮，

设置一个 z-index 较低就可以了

.header-overlay{
    /* z-index: 1; Original line in your code*/
    z-index: 0;
}

Answer 3

你有两个解决方案：

解决方案一：

让 menu-wrap 元素的 z-index 高于 header-overlay z-index

.menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

方案二：

添加position:relative； z-索引：0；到您的页眉，使其成为菜单包装下的图层：

.container{
   position: relative;
   z-index: 0;
}

汉堡菜单（仅 css）不可点击

hamburger menu (css only) not clickable

html

css

checkbox

hamburger-menu