设计具有网格布局的响应式移动菜单

Question

我尝试构建一个响应式移动菜单。我的问题是，我可以通过单击汉堡包图标来打开菜单，但关闭图标不起作用。我认为网格区域和span标签的样式之间可能存在冲突，但我看不到它。

/* import Google Fonts Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


*{margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Poppins', 'san-serifs'}
 
body{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height : 70vh;

    
}

.container{
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  background-color: aliceblue;
  grid-template-areas: "header header header header header header header header header"
                        "main main main main main main main main main"
                        "footer footer footer footer footer footer footer footer footer";

}

.container .header {
  display: grid;
  grid-area: header;
 
    font-size: 1.45rem;
    font-weight: 500;
  background-color: black;
  position: sticky;
  top: 0%;


}
.container .main{
grid-area: main;
background-color: red;
}
.container .footer {
  grid-area: footer;
  background-color: gold;
}

.container .header .nav .menu{
  list-style: none;
  display: grid;
}
.menu .home{
  grid-column: 1/2;
  
}

.menu .events{

grid-column: 2/3;

}
.menu .langos{
  
grid-column: 3/4;

}

.menu .uns {
  grid-column: 5/6;
}
.menu .news{
  grid-column: 6/7;
}
.menu .kontakt{
  grid-column: 7/8;
}
     /* Nav menu */
     .side-menu {
      display: none;
    } 

nav li a{
  text-decoration:none;
  color: yellow;
 
}
nav li a:hover{
  color: aliceblue;
  transition: 0.7s;
}



@media (max-width: 767px) {

        .container {
        background-color:aliceblue;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas: 
        
        "header header header"
        "header header header"
        "header header header"
        
        "main main main"
        "main main main"
        "main main main"
        
        "footer footer footer"
        "footer footer footer "
        "footer footer footer"
        
        }
        .container .header{
          display: grid;
          grid-area:auto;
        }

        .menu  .home{
          grid-column: 2/3;
          grid-row: 1/2;
        }
        .menu  .events{ 
        grid-column: 3/4;
        grid-row: 1/2;
        }
        .menu  .langos{
        grid-column: 2/3;
        grid-row: 2/3;
        }
        .menu  .uns {
          grid-column: 3/4;
          grid-row: 2/3;
        }
        .menu  .news{
          grid-column: 2/3;
          grid-row: 3/4;
        }
        .menu  .kontakt{
          grid-column: 3/4;
          grid-row: 3/4;
        }
        .menu  .logo{
          display: none;
        }*/

        /* Nav menu */
        .side-menu {
          display: none;
        } 
      .nav{
        width: 100%;
        height: 100%;
        position: fixed;
      
        overflow: hidden;

      }
        .nav{
          max-height: 0;
          transition: max-height .5s ease-out;
        }
      /* Menu Icon */
      .hamb{
        cursor: pointer;
       
        
      }
      /* Style label tag */

      .hamb-line {
        background: white;
        display: block;
        height: 2px;
        position: relative;
        width: 24px; 
        

      }
      /* Style span tag */

      .hamb-line::before,
      .hamb-line::after{
          background: white;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          transition: all .2s ease-out;
          width: 100%;
      }
      .hamb-line::before{
          top: 5px;
      }
      .hamb-line::after{
          top: -5px;
      }

      /* Toggle menu icon */
      .side-menu:checked ~ nav{
        max-height: 100%;
      }
      .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
      }
      .side-menu:checked ~ .hamb .hamb-line::before {
        transform: rotate(-45deg);
        top:0;
      }
      .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top:0;
      }

      body:has(.side-menu:checked) {
      overflow: hidden;
      }
  }


  @media (min-width: 768px) and (max-width: 1023px) {

    .container {
    background-color:blueviolet;
    
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
    
    "header header header"
    "header header header"
    "header header header"
    
    "main main main"
    "main main main"
    "main main main"
    
    "footer footer footer"
     "footer footer footer"
      "footer footer footer"
    
    }
}

<!DOCTYPE html>
<html lang = "en"  dir = "ltr">
    
<head>
  <meta charset ="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content-type="text/html">
  <!--meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0"-->
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/Screenshot 2024-12-04 164538.png">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
  <link  rel="stylesheet"  href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"/>

  <title>Index</title>
  <link rel = "stylesheet" href="style.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <link rel="stylesheet" href ="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
<script src="jquery-3.7.1.js"></script>  
<!--script type= "module" src="script.js" async></script-->
  </head>

  <body>

    <div class="container">
      
        <header class="header">
          <!--Hamburger Icon-->
          <input class="side-menu" title="hamb" type="checkbox" id="side-menu"/>
          <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
          <!--Menu-->
          <nav class="nav">
            <ul class="menu">
             <li class="home"> <a  href="index.html">Home</a></li>
              <li class="events"><a  href="events.html">Events</a></li>
              <!--li class="langos"><a  href="langos.html">Langos</a></li-->
             
              <li class="uns"><a href="uns.html">Über uns</a></li>
              <li class="news" ><a  href="news.html">News</a></li>
              <li class="kontakt"><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </nav>
        </header>
        <!-- Main content -->
        <main class="main">Main area</main>
        <footer class="footer">Footer</footer>
      
      
        
    </div>

  </body>

当您最小化窗口时，您可以在代码片段中看到灾难。我希望你能帮助我。

Answer 1

这是因为当您点击手机屏幕上的菜单图标时，导航菜单会打开，但它位于关闭图标之上，因此您无法通过再次点击关闭图标来关闭导航菜单。要解决此问题，您可以在菜单图标上设置

z-index

，使其保持在其他元素之上。

.hamb{
    cursor: pointer;
    z-index: 1000; /* Set z-index to keep the icon at the top position */
}

/* import Google Fonts Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


*{margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Poppins', 'san-serifs'}
 
body{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height : 70vh;

    
}

.container{
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  background-color: aliceblue;
  grid-template-areas: "header header header header header header header header header"
                        "main main main main main main main main main"
                        "footer footer footer footer footer footer footer footer footer";

}

.container .header {
  display: grid;
  grid-area: header;
 
    font-size: 1.45rem;
    font-weight: 500;
  background-color: black;
  position: sticky;
  top: 0%;


}
.container .main{
grid-area: main;
background-color: red;
}
.container .footer {
  grid-area: footer;
  background-color: gold;
}

.container .header .nav .menu{
  list-style: none;
  display: grid;
}
.menu .home{
  grid-column: 1/2;
  
}

.menu .events{

grid-column: 2/3;

}
.menu .langos{
  
grid-column: 3/4;

}

.menu .uns {
  grid-column: 5/6;
}
.menu .news{
  grid-column: 6/7;
}
.menu .kontakt{
  grid-column: 7/8;
}
     /* Nav menu */
     .side-menu {
      display: none;
    } 

nav li a{
  text-decoration:none;
  color: yellow;
 
}
nav li a:hover{
  color: aliceblue;
  transition: 0.7s;
}



@media (max-width: 767px) {

        .container {
        background-color:aliceblue;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas: 
        
        "header header header"
        "header header header"
        "header header header"
        
        "main main main"
        "main main main"
        "main main main"
        
        "footer footer footer"
        "footer footer footer "
        "footer footer footer"
        
        }
        .container .header{
          display: grid;
          grid-area:auto;
        }

        .menu  .home{
          grid-column: 2/3;
          grid-row: 1/2;
        }
        .menu  .events{ 
        grid-column: 3/4;
        grid-row: 1/2;
        }
        .menu  .langos{
        grid-column: 2/3;
        grid-row: 2/3;
        }
        .menu  .uns {
          grid-column: 3/4;
          grid-row: 2/3;
        }
        .menu  .news{
          grid-column: 2/3;
          grid-row: 3/4;
        }
        .menu  .kontakt{
          grid-column: 3/4;
          grid-row: 3/4;
        }
        .menu  .logo{
          display: none;
        }*/

        /* Nav menu */
        .side-menu {
          display: none;
        } 
      .nav{
        width: 100%;
        height: 100%;
        position: fixed;
      
        overflow: hidden;

      }
        .nav{
          max-height: 0;
          transition: max-height .5s ease-out;
        }
      /* Menu Icon */
      .hamb{
        cursor: pointer;
        z-index: 1000; /* Set z-index to keep the icon at the top position */
        
      }
      /* Style label tag */

      .hamb-line {
        background: white;
        display: block;
        height: 2px;
        position: relative;
        width: 24px; 
        

      }
      /* Style span tag */

      .hamb-line::before,
      .hamb-line::after{
          background: white;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          transition: all .2s ease-out;
          width: 100%;
      }
      .hamb-line::before{
          top: 5px;
      }
      .hamb-line::after{
          top: -5px;
      }

      /* Toggle menu icon */
      .side-menu:checked ~ nav{
        max-height: 100%;
      }
      .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
      }
      .side-menu:checked ~ .hamb .hamb-line::before {
        transform: rotate(-45deg);
        top:0;
      }
      .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top:0;
      }

      body:has(.side-menu:checked) {
      overflow: hidden;
      }
  }


  @media (min-width: 768px) and (max-width: 1023px) {

    .container {
    background-color:blueviolet;
    
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
    
    "header header header"
    "header header header"
    "header header header"
    
    "main main main"
    "main main main"
    "main main main"
    
    "footer footer footer"
     "footer footer footer"
      "footer footer footer"
    
    }
}

<!DOCTYPE html>
<html lang = "en"  dir = "ltr">
    
<head>
  <meta charset ="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content-type="text/html">
  <!--meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0"-->
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/Screenshot 2024-12-04 164538.png">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
  <link  rel="stylesheet"  href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"/>

  <title>Index</title>
  <link rel = "stylesheet" href="style.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <link rel="stylesheet" href ="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
<script src="jquery-3.7.1.js"></script>  
<!--script type= "module" src="script.js" async></script-->
  </head>

  <body>

    <div class="container">
      
        <header class="header">
          <!--Hamburger Icon-->
          <input class="side-menu" title="hamb" type="checkbox" id="side-menu"/>
          <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
          <!--Menu-->
          <nav class="nav">
            <ul class="menu">
             <li class="home"> <a  href="index.html">Home</a></li>
              <li class="events"><a  href="events.html">Events</a></li>
              <!--li class="langos"><a  href="langos.html">Langos</a></li-->
             
              <li class="uns"><a href="uns.html">Über uns</a></li>
              <li class="news" ><a  href="news.html">News</a></li>
              <li class="kontakt"><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </nav>
        </header>
        <!-- Main content -->
        <main class="main">Main area</main>
        <footer class="footer">Footer</footer>
      
      
        
    </div>

  </body>