햄버거 메뉴 구조

· HTML
· CSS
・javascript(jquery)

1. HTML로 '햄버거 아이콘'과 '표시되는 메뉴' 만들기
2. JavaScript (jquery)로 햄버거 아이콘 클릭 액션 만들기
3.2 클릭 액션으로 각 div에 클래스를 추가하거나 지우기
4.3의 class의 유무로 div의 CSS가 변화해, 메뉴의 표시·비표시가 행해진다

1. 햄버거 (3) 버튼
(3) 버튼을 누르면 (☓) 버튼으로 전환 메뉴가 표시된다
2. 닫기(☓) 버튼
닫기 버튼을 누르면 메뉴가 숨겨지고 (3) 버튼으로 전환됩니다.
3. 메뉴 부분(통상시 숨기기)(클릭시 표시)
닫기 버튼을 누르면 메뉴 부분이 숨겨집니다.

(예) 햄버거 메뉴를 만드는 방법 (순서)

1. 햄버거 메뉴가 되는 곳 만들기
2. 햄버거 메뉴 배경 만들기 (배치)
3. 버튼(삼본선) 만들기
4. 클릭하면 닫기 버튼 (☓)으로 설정 (전환)
5. 메뉴 표시/숨기기
그 밖에도 만드는 방법이 있어, 이 만드는 방법이 올바른 것은 아니다.
※span으로 만들거나, div나 체크 박스, a, button등으로 만들고 있는 것을 본다.

1. 햄버거 버튼의 기초가 되는 코드

<div class="humburger"><!--ハンバーガーボタン-->
      <span></span>
      <span></span>
      <span></span>
</div>

2. 배경 만들기

.humburger {
background-color: beige;　/*分かりやすく色をbeigeに*/
position: fixed;　　　　　 /*今回は固定して作ってます*/
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}

3. 삼본선 만들기

.humburger span {
  width: 30px;
  height: 1px;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s; /*真ん中の線がゆっくり消えるように*/
}

.humburger span:nth-of-type(1) {
  transform: translate(-50%, -10px);
}

.humburger span:nth-of-type(3) {
  transform: translate(-50%, 9px);
}

4. 클릭하면 ☓ 버튼이 되도록 전환
중간의 선을 지우고, 상하의 선을 ☓로 한다.　

.humburger.active span:nth-of-type(1) {
transform: rotate(45deg) translate(-50%, 0);
transform-origin: 0% 50%;
}

.humburger.active span:nth-of-type(2) {
    opacity: 0;
}

.humburger.active span:nth-of-type(3) {
transform: rotate(-45deg) translate(-50%, 0);
transform-origin: 0% 50%;
}

클릭하면 active를 추가합니다.

 document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("humburger").addEventListener("click", function() {
    this.classList.toggle("active")
   })
  });

5. 메뉴 표시/숨기기
바탕이 되는 메뉴 만들기, CSS로 배치나 색등을 결정한다.
클릭하면 오른쪽에서 nav가 표시되고 다시 클릭하면 닫도록 한다. (드로어메뉴-같게 한다)

<nav id="nav">
   <ul>
          <li><a href="">menu0</a></li>
      <li><a href="">menu1</a></li>
      <li><a href="">menu2</a></li>
      <li><a href="">menu3</a></li>
      <li><a href="">menu4</a></li>
   </ul>
  </nav>

nav {
    position: fixed;
    top: 0px;
    right: -200px;
    width: 180px;
    height: 100%;
    padding: 40px 30px 0 0;
    opacity: 0;
    transition: 0.4s;
    visibility: hidden;
    background-color: #ddd;
    text-align: center; 
    z-index: -1;
}

nav.active {
    opacity: 1;
    visibility: visible;
    right: 0;
}

a {
    font-size: 2rem;
    color: black; 
}   

li {
    padding: 5px 0 10px 0;
    padding-top: 20px;
}

4로 작성된 javascript에 (nav active 추가)

document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("humburger").addEventListener("click", function() {
    this.classList.toggle("active");
    document.getElementById("nav").classList.toggle("active");
   })
  });

이번에 작성한 코드로 만든 것

(클릭 전) 이미지가 확대되고 있습니다.
왼쪽 문자나 버튼은 걱정하지 마십시오.


(클릭 후)