【CSS & JS】 매우 간단. 햄버거 아이콘을 클릭하여 ×로 변경 & 메뉴를 슬라이드 아웃하는 방법

비망록입니다.

햄버거 메뉴를 클릭하면, ×표로 바꾸려면… … CSS로 만드는 방법도 있는 것 같지만, 어떻게 할까. 비밀리에 계속 신경이 쓰여 있었기 때문에 조사해 보았습니다.

자바스크립트도 사용하지만 결코 어색한 일은 하지 않아도 좋은 방법을 발견했습니다.

여기 두 가지를 할 것입니다.
❶ 햄버거를 클릭하여 × 표시로 변경
❷ 메뉴를 화면 오른쪽에서 슬라이드 아웃

우선 HTML에서.

HTML

<!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/styles.css" />
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <title>Slide Out Menu</title>
  </head>
  <body>
    <header>
      <nav>
        <div class="burger-menu-icon">//①ハンバーガーのdivをつくる
          <input type="checkbox" id="burger" />//②Toggleするためにはcheckboxを書く！ここがカギ！
          <label for="burger">//③label forはinputのidとそろえる。
            <div class="burger-icon">
              <span></span>
              <span></span>
              <span></span>
            </div>//④labelのなかにハンバーガーアイコンを入れましょう。
          </label>
          <div class="slideoutMenu">//⑤スライドアウトさせるメニューは、.burger-menu-iconのdiv内におさめます。
            <div class="opacity"></div>
            <div class="menu">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="#">Style</a></li>
                <li><a href="#">Reviews</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <script src="script.js"></script>
  </body>
</html>

포인트❶

toggle하려면 input type="checkbox"

포인트❷

이번에는 햄버거 아이콘을 클릭하여 메뉴를 끌어 내고 싶습니다. 그래서 햄버거 아이콘은 <label for="burger"></label> 안에 넣자. 일반적으로 checkbox를 체크하지 않으면 checkbox에 체크는 되지 않습니다만, label for라고 하는 것을 덧붙이면, label for의 내용을 클릭하는 것만으로 checkbox에 check가 붙여집니다. 다만 label for="burger" 와, input id="burger" label 를 input 로 묶기 위해서는 , 이 2개를 가지런히 할 필요가 있습니다. 입력은 항상 id로 지정합니다.

포인트❸

햄버거 아이콘과 숨겨진 메뉴는 같은 div에 넣어. (이 경우 .burger-menu-icon)

SCSS

.burger-icon {
  display: block;
  z-index: 11;
}

.burger-icon span { //ここでburger-iconをつくる
  display: block;
  background: #000; //background-colorではなく、backgroundで指定
  width: 50px;
  height: 5px;
  margin-bottom: 10px;
  margin-left: 90%;
  cursor: pointer;
  position: relative;
  top: 0;
}

input#burger { //labelここでcheckboxを消す
  display: none;
}

.burger-icon.open span:nth-child(2) { //クリックすると'open'というクラスがtoggleされるよう、JSに記述しています。つまり、これはハンバーガーをクリックするとハンバーガーの2本目の線が消えるという記述です。
  width: 0;
  opacity: 0;
}

.burger-icon.open span:nth-child(1) {　//これはハンバーガーをクリックするとハンバーガーの1本目の線が45度回転し、上から15px下方向にずらすという記述です。
  transform: rotate(45deg);
  top: 15px;
}

.burger-icon.open span:nth-child(3) {//これはハンバーガーをクリックするとハンバーガーの3本目の線が-45度回転し、15px上方向にずらすという記述です。
  transform: rotate(-45deg);
  top: -15px;
}

.slideoutMenu {
  transform: translateX(100%); //メニューを右に100%ずらすことで、画面から消す。
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: 0.3s;
  animation: slideOut 0.3s;
  .opacity,
  .menu {
    width: 50%;
    background-color: #5d348c;
    ul {
      list-style: none;
      li {
        padding-bottom: 3rem;
      }
      li a {
        text-decoration: none;
        font-size: 3rem;
        color: #ea5c5d;
        text-transform: uppercase;
      }
    }
  }
  .opacity {
    background-color: #ea5c5d;
    opacity: 0.7;
  }
}

@keyframes slideOut {　//ここでスライドの動作をつくります。（slideIn、のほうがふさわしかったかも T_T ）
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translatex(50%);
  }
  50% {
    transform: translatex(0%);
  }
}

input:checked ~ .slideoutMenu { //これがツワモノ！！！詳細は【覚えておきたいポイント3】で。
  transform: translateX(0%);
}

기억하고 싶은 포인트 ❶

<input> 태그 뒤에 <label for="burger">를 추가하면 label 태그의 요소를 클릭하여 체크박스를 확인할 수 있습니다.

기억하고 싶은 포인트 ❷

.burger-icon.open span:nth-child(3), .burger-icon.open span:nth-child(1) 에서는 햄버거 위쪽과 아래쪽 선을 회전시키고 top:〜 로 위치를 어긋나게 합니다. top의 위치를 어긋나려면, .burger-icon span 에 position: relative; top: 0; 라고 쓰지 않으면 효과가 없기 때문에 주의입니다.

기억하고 싶은 포인트 ❸

마지막에 input:checked ~ .slideoutMenu를 쓰면 메뉴가 오른쪽에서 화면으로 슬라이드 인됩니다.input:checked 는, 「체크 박스가 check 되고 있으면……」라고 하는 의미입니다. ~ 는 형제 요소를 얻고 싶어 ~라는 의미를 가진 기호입니다. input 와 .slideoutMenu 는 모두 burger-menu-icon 의 자식 요소이므로, 형제 요소에 합당합니다. ~ 가 없으면 효과가 없으므로 주의입니다.

JS

$(".burger-icon").click(function() {
  $(this).toggleClass("open");
});

JS에서는 간단하게, 「.burger-icon 의 클릭으로, open 라고 하는 class를 toggle 해 주세요」라고 전하고 있을 뿐입니다.

하는 방법은 몇 가지가 있다고 생각합니다만, 개인적으로는 이것이 제일 알기 쉬울까라고 느꼈습니다.

완성판 gif👇

Reference

이 문제에 관하여(【CSS & JS】 매우 간단. 햄버거 아이콘을 클릭하여 ×로 변경 & 메뉴를 슬라이드 아웃하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mikumikumikumiku/items/e5b79099f6b2140fa19b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)