HTML과 CSS를 이용한 햄버거 메뉴 만들기!

Html과 css를 사용하여 햄버거 메뉴를 쉽게 만들 수 있으며,
먼저 햄버거 메뉴의 HTML 구조를 구축합니다.

     <div class="hamContainer">
        <input type="checkbox">
        <div class="hamLines">
            <span class="line line1"></span>
            <span class="line line2"></span>
            <span class="line line3"></span>
        </div>
        <div class="hamItems">
            <ul>
                <li><a href="home">home</a></li>
                <li><a href="home">about</a></li>
                <li><a href="home">content</a></li>
                <li><a href="home">about</a></li>
                <li><a href="home">privacy</a></li>
                <li><a href="home">download</a></li>
            </ul>
        </div>
     </div>

구조가 완료되었습니다. 이제 Css를 작성합니다.

*{
  padding: 0;
  margin: 0;
  box-sizing: content-box;
}
body{
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-content: center;
}

.hamContainer{
  margin-top: 5%;
  width: 30rem;
}

.hamContainer input{
  height: 50px;
  width: 50px;
  z-index: 3;
  opacity: 0;
}

.hamContainer .hamLines{
   width: 50px;
   height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-content: center;
   position: absolute;
   top: 10%;
   z-index: -1;
   /* opacity: 0; */
}

.hamContainer .hamLines span{
  height: 5px;
  width: 65px;
  background: black;
}

.hamContainer .hamItems{
     height: 25rem;
     width: 20rem;
     background: #ffff;
     display: flex;
     justify-content: center;
     align-content: center;
     display: none;
     padding: 1rem;
     border-radius: 30px;
}
.hamContainer .hamItems ul{
     list-style: none;
     text-decoration: none;
     text-transform: capitalize;
     font-size: 2em;
}
.hamContainer .hamItems ul li{
     margin: 1.5rem 0 0 2rem;
}
.hamContainer .hamItems ul li a{
     text-decoration: none;
     color: black;
}
.hamContainer .hamItems ul li a:hover{
      background: #6666;
      padding: 0.3rem 0.5rem;
      border-radius: 30px;
      border: 3px solid black;
}
.hamContainer  .hamLines .line1{
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.hamContainer .hamLines .line2{
  transition: transform 0.4s ease-in-out;
}
.hamContainer .hamLines .line3{
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
.hamContainer input[type="checkbox"]:checked ~ .hamItems{
  display: block;
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line1{
  transform: rotate(45deg);
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line2{
  transform: scaleY(0);
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line3{
  transform: rotate(-45deg);
}

데모: Hamburger
중요한 것은 확인란을 클릭할 때 확인란입니다. 그렇지 않으면 탐색 항목이 표시됩니다. 그렇지 않으면 확인란 클릭에 따라 숨겨집니다. & line2 숨기기 & line1 line3 십자가로 변경.

더 많은 것들이 나를 따라
오픈 소스 프로젝트 후속gitHub
멋진 Css 애니메이션을 찾고 있다면 나를 팔로우하세요CodePen.