2-1. CSS, JavaScript 간단한 메뉴 버튼 만들기 (How to make Menu Button[How to make CSS Hamburger Menu])

 

RESULT

클릭하면 메뉴 모양이 X로 변경됩니다.
Click on the Menu Icon to transform it to "X"

---

body

    <div class="container" onclick="MenuIcon(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
	 <p>클릭하면 메뉴 모양이 X로 변경됩니다.</p>
     <P>Click on the Menu Icon to transform it to "X"</P>

 

CSS style

    .container{ 	/* bar1,2,3 전체의 컨테이너 클래스 지정 */
        cursor: pointer; /* 마우스 커서를 요소에 갖다 대면 클릭 모양으로 바뀜 */
    }
    .bar1, .bar2, .bar3{
        width: 35px;	/* 각각의 bar들을 너비 높이 지정*/
        height: 5px;
        background-color: #000;		/* bar색상을 검정색으로 지정 */
        margin: 6px 0;		/* bar 여백을 상하 6px, 좌우 0px로 지정 */
        transition: 0.4s;	/* 애니메이션 속도를 0.4초로 조절 */
    }
    .x_change .bar1{	/* 자바스크립트 문법 참조 */
        transform: rotate(-45deg) translate(-9px, 6px);	
        /* rotate(-45도 회전) , translate(오른쪽으로 -9px, 아래쪽으로6px) */
    }
    
    .x_change .bar2{ 
        opacity: 0; /* X로 바뀔때 두번째 바는 필요없으므로 투명도를 0으로 설정 */
    }
    .x_change .bar3{
        transform: rotate(45deg) translate(-8px, -8px);
        /* rotate(-45도 회전) , translate(오른쪽으로 -8px, 아래쪽으로-8px) */
    }

 

JavaScript

    function MenuIcon(e){
        e.classList.toggle("x_change");
    }

---

Element.classList.toggle 이란?

 

전등 스위치를 껐다 켰다 하는 행위 처럼

0과 1이 반복되는 행위를 의미한다.
즉 기존 값이 0이었다면 1로 바뀌고

기존 값이 1이었다면 0으로 바뀌게 된다.
toggle 메서드는 클래스가 존재한다면 클래스를 제거하고

클래스가 존재하지 않는다면 클래스를 추가하는 메서드이다.

 

쉽게 말하자면 자바스크립트에 toggle을 지정하여

body에 입력한 container 클래스에 원클릭 이벤트[onclick="MenuIcon(this)"]를 지정해주고 
css에 입력한 .x_change .bar1,2,3을 껐다 켜서
햄버거 모양과 x 모양을 반복 시킬 수 있다. 

 

★ (this) 는  function MenuIcon(e) 에서 e라고 보면 이해할 수 있다.