如何将汉堡包图标添加到导航栏

Question

我是网络开发新手，我现在正在学习CSS。我选择作为开始我的个人作品集的项目。

我正在创建一个简单的导航栏，我想添加汉堡包图标，但是当我将图标添加到

navbar

时，图标堆叠在导航栏和动画的底部（线条像X一样交叉，当按钮是切换）。我希望图标位于导航栏的左上角。

我尝试将图标添加到列表之外的导航中，但它溢出了

<h1>

标签，因此我尝试添加到

<aside>

父级，但它也溢出了

<h1>

标签。

body {
  background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}

.menu {
  border: 2px solid white;
  position: sticky;
  display: flex;
  flex-direction: row;
  height: 95vh;
  width: 17%;
  background: linear-gradient(180deg, #241023ff, #6b0504ff);
  /*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: 0.5s;
}

.wrapper {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: flex-start;
}

.container {
  margin-top: 10px;
  width: 100%;
  height: 25px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-logo {
  height: 3px;
  width: 30px;
  background-color: white;
}

.showmenu {
  width: 25%;
}


/* #endregion Toggle button animation*/


/* #region Hover effect*/

nav:hover,
nav:active {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

li a:hover,
li a:active {
  font-weight: bold;
  border: 1px solid white;
  border-radius: 10px;
  background: rgb(246, 246, 246);
  transition: 0.5s;
}

li a:hover svg,
li a:active svg {
  fill: #f75c03ff;
}

li a:hover span,
li a:active span {
  color: #f75c03ff;
  stroke: #f75c03ff;
}


/* #endregion Hover effect*/

nav {
  width: 100%;
  display: list-item;
  text-align: center;
  justify-content: center;
}


/* #region Welcome text*/

nav .welcome-text {
  width: 100%;
  margin-left: auto;
  display: flex;
  justify-content: center;
  font-size: 3.5vw;
  margin-bottom: 60px;
  color: white;
  text-align: center;
}


/* #endregion Welcome text*/


/* #region Main content*/


/* #region Wave animation*/

.wave {
  width: 50%;
  animation-name: wave-animation;
  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;
  /* Change to speed up or slow down */
  animation-iteration-count: infinite;
  /* Never stop waving :) */
  transform-origin: 70% 70%;
  /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
  0% {
    transform: rotate( 0.0deg)
  }
  10% {
    transform: rotate(14.0deg)
  }
  /* The following five values can be played with to make the waving more or less extreme */
  20% {
    transform: rotate(-8.0deg)
  }
  30% {
    transform: rotate(14.0deg)
  }
  40% {
    transform: rotate(-4.0deg)
  }
  50% {
    transform: rotate(10.0deg)
  }
  60% {
    transform: rotate( 0.0deg)
  }
  /* Reset for the last half to pause */
  100% {
    transform: rotate( 0.0deg)
  }
}


/* #endregion Wave animation*/

nav ul {
  width: 100%;
  height: 100%;
  display: list-item;
}

nav ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

li a {
  width: 100%;
  height: 7%;
  text-decoration: none;
  display: flex;
  text-align: left;
  font-size: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

li a span {
  width: 100%;
  font-size: 2.7vw;
  align-self: center;
  color: white;
  margin-left: 10px;
}

li a svg {
  width: 20%;
  height: 20%;
}

<aside class="menu">
  <div class="container nav-container">
    <input class="checkbox" type="checkbox" name="" id="" />
    <div class="hamburger-lines">
      <span class="line line1"></span>
      <span class="line line2"></span>
      <span class="line line3"></span>
    </div>
  </div>

  <nav>

    <ul>

      <li>
        <h1 class="welcome-text">Welcome <span class="wave">👋</span></h1>

      </li>
      <li>
        <a href="#">

          <svg viewBox="0 0 24 24" fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M21 8.77217L14.0208 1.79299C12.8492 0.621414 10.9497 0.621413 9.77817 1.79299L3 8.57116V23.0858H10V17.0858C10 15.9812 10.8954 15.0858 12 15.0858C13.1046 15.0858 14 15.9812 14 17.0858V23.0858H21V8.77217ZM11.1924 3.2072L5 9.39959V21.0858H8V17.0858C8 14.8767 9.79086 13.0858 12 13.0858C14.2091 13.0858 16 14.8767 16 17.0858V21.0858H19V9.6006L12.6066 3.2072C12.2161 2.81668 11.5829 2.81668 11.1924 3.2072Z" />
                            </svg>
          <span>Home</span>
        </a>

      </li>
    </ul>
  </nav>
</aside>

完整代码在这里： https://jsfiddle.net/Lhawck59/

Answer 1

<div class="hamburger-lines">

, 您没有为此标签编写结束标签，因此您的代码不起作用

Answer 2

您可以在班级菜单上添加

oppacity: 0;

，并在班级显示菜单上添加

oppacity: 1;

 var logo = document.querySelector('.container');
    var menu = document.querySelector('.menu');

    logo.addEventListener('click',function(){
        menu.classList.toggle('showmenu');
    });

    body {
  background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}

.menu {
  border: 2px solid white;
  position: sticky;
  display: flex;
  flex-direction: row;

  height: 95vh;
  width: 17%;
  background: linear-gradient(180deg, #241023ff, #6b0504ff);
  /*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: 0.5s;
  opacity: 0;

}

/* #region Toggle button animation*/

.wrapper {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: flex-start;
}

.container {
  margin-top: 10px;
  width: 100%;
  height: 25px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;


}

.menu-logo {
  height: 3px;
  width: 30px;
  background-color: white;
}

.showmenu {
  width: 25%;
  opacity: 1;
}

/* #endregion Toggle button animation*/
/* #region Hover effect*/

nav:hover,
nav:active {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

li a:hover,
li a:active {
  font-weight: bold;
  border: 1px solid white;
  border-radius: 10px;
  background: rgb(246, 246, 246);
  transition: 0.5s;



}

li a:hover svg,
li a:active svg {
  fill: #f75c03ff;

}

li a:hover span,
li a:active span {
  color: #f75c03ff;
  stroke: #f75c03ff;
}

/* #endregion Hover effect*/
nav {
  width: 100%;
  display: list-item;
  text-align: center;
  justify-content: center;

}

/* #region Welcome text*/
nav .welcome-text {
  width: 100%;
  margin-left: auto;
  display: flex;
  justify-content: center;
  font-size: 3.5vw;
  margin-bottom: 60px;
  color: white;
  text-align: center;

}

/* #endregion Welcome text*/


/* #region Main content*/


/* #region Wave animation*/
.wave {
  width: 50%;
  animation-name: wave-animation;
  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;
  /* Change to speed up or slow down */
  animation-iteration-count: infinite;
  /* Never stop waving :) */
  transform-origin: 70% 70%;
  /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
  0% {
    transform: rotate(0.0deg)
  }

  10% {
    transform: rotate(14.0deg)
  }

  /* The following five values can be played with to make the waving more or less extreme */
  20% {
    transform: rotate(-8.0deg)
  }

  30% {
    transform: rotate(14.0deg)
  }

  40% {
    transform: rotate(-4.0deg)
  }

  50% {
    transform: rotate(10.0deg)
  }

  60% {
    transform: rotate(0.0deg)
  }

  /* Reset for the last half to pause */
  100% {
    transform: rotate(0.0deg)
  }
}

/* #endregion Wave animation*/

nav ul {

  width: 100%;
  height: 100%;
  display: list-item;


}

nav ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

}

li a {
  width: 100%;
  height: 7%;
  text-decoration: none;
  display: flex;
  text-align: left;
  font-size: 100%;
  justify-content: center;
  margin-bottom: 10px;



}

li a span {
  width: 100%;
  font-size: 2.7vw;
  align-self: center;
  color: white;
  margin-left: 10px;
}


li a svg {
  width: 20%;
  height: 20%;
}

/* #endregion Main content*/

/* #region footer of navbar*/
ul li div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7%;
  display: flex;
  flex-direction: row;
  text-align: left;
  justify-content: flex-start;
}

li div img {
  width: auto;
  height: auto;
  border-radius: 50%;
  border: 2px solid white;
}

nav div span {
  width: 100%;
  font-size: 0;
  align-self: center;
  color: white;
  margin-left: 10px;
  font-weight: bolder;
}


/* #endregion footer of navbar*/

/*TEST*/
.nav-container {
    
    display: flex;
    justify-content: space-between;
    align-items: left;
    width: 5%;
    
  }
  
  
.nav-container .checkbox {
    
    position: absolute;
    display: block;
    width: 5%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }
.nav-container .hamburger-lines {
    display: block;
    height: 26px;
    width: 32px;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
.nav-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: rgb(255, 255, 255);
  }

  .nav-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }
  
  .nav-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }
  
  .nav-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .logo{
    display: none;
  }

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    /*font-family: 'Noto Sans', sans-serif;*/
}
header{
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/content/content.css">
    <link rel="stylesheet" href="css/navbar/navbar.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,700;1,300;1,500&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="css/navbar/hamburgerIcon/hamburgerIcon.css">
    <title>Portfolio</title>
  </head>

  <body>

    <header>
      <h1>Header</h1>

      <div class="container nav-container">
        <input class="checkbox" type="checkbox" name="" id="" />
        <div class="hamburger-lines">
          <span class="line line1"></span>
          <span class="line line2"></span>
          <span class="line line3"></span>
        </div>
    </header>


    <aside class="menu">


      <nav>

        <ul>

          <li>
            <h1 class="welcome-text">Welcome <span class="wave">👋</span></h1>

          </li>
          <li>
            <a href="#">

              <svg viewBox="0 0 24 24" fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 8.77217L14.0208 1.79299C12.8492 0.621414 10.9497 0.621413 9.77817 1.79299L3 8.57116V23.0858H10V17.0858C10 15.9812 10.8954 15.0858 12 15.0858C13.1046 15.0858 14 15.9812 14 17.0858V23.0858H21V8.77217ZM11.1924 3.2072L5 9.39959V21.0858H8V17.0858C8 14.8767 9.79086 13.0858 12 13.0858C14.2091 13.0858 16 14.8767 16 17.0858V21.0858H19V9.6006L12.6066 3.2072C12.2161 2.81668 11.5829 2.81668 11.1924 3.2072Z" />
              </svg>
              <span>Home</span>
            </a>

          </li>

          <li>
            <a href="#">

              <svg fill="transparent" stroke="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 2H6a2 2 0 0 0-2 2v3H2v2h2v2H2v2h2v2H2v2h2v3a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-8 2.999c1.648 0 3 1.351 3 3A3.012 3.012 0 0 1 13 11c-1.647 0-3-1.353-3-3.001 0-1.649 1.353-3 3-3zM19 18H7v-.75c0-2.219 2.705-4.5 6-4.5s6 2.281 6 4.5V18z" />
              </svg>
              <span>Contact</span>
            </a>

          </li>

          <li>
            <a href="#">

              <svg fill="transparent" stroke="white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 7C17 5.34315 15.6569 4 14 4H10C8.34315 4 7 5.34315 7 7H6C4.34315 7 3 8.34315 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.34315 19.6569 7 18 7H17ZM14 6H10C9.44772 6 9 6.44772 9 7H15C15 6.44772 14.5523 6 14 6ZM6 9H18C18.5523 9 19 9.44772 19 10V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V10C5 9.44772 5.44772 9 6 9Z" />
              </svg>
              <span>My work</span>
            </a>
          </li>

          <li>
            <a href="#">

              <svg fill="transparent" stroke="white" xmlns="http://www.w3.org/2000/svg" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
                <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
              </svg>
              <span>References</span>

            </a>
          </li>

          <li>
            <a href="#">

              <svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-person-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
              </svg>
              <span>About</span>
            </a>

          </li>


        </ul>




      </nav>



    </aside>
    <script src="js/script.js"></script>

  </body>

</html>