시작하면서...

프런트엔드 개발자로 전직하기 위해서 슬라이더, 오버레이등 여러가지 프런트에 관한 스킬들을 익혀야 된다는 생각이 들었다. 나중에 프런트엔드 개발자인데 이런 것도 못 하냐는 소리 안들으려면 기본에 충실해야 된다고 생각하기 때문이다. 그런 의의로 여러가지 snippets을 익히는 이 프로젝트를 시작하게 됐다. 화이팅!!

요놈을 한번 만들어보자!! (귀엽다...)

HTML

햄버거 바를 div (bar1, bar2, bar3) 3개를 이용하여 만들자!

    <div class="container" onclick="transformMenuIcon(this);">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>

CSS

CSS에서 중요한 점은 다음과 같다.
.container을 클릭한 순간 click 이벤트가 발생하고 transformMenuIcon() 함수를 호출하게 된다. 이 함수는 뒤쪽 javascript 섹션에서 설명하겠지만 .change라는 클래스 이름을 토글하는 함수이다. 즉, .change 클래스가 없으면 넣어주고 있으면 빼주는 함수다. 따라서 .change 클래스 명이 있을 경우 .bar1 과 .bar3 는 회전시켜주고 .bar2는 opacity를 활용해 눈이 안보이게 해주면 저 귀여운 메뉴를 얻을 수 있다.

.container {
    cursor: pointer;

}
.container div {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 5px 0;
    transition: .4s;
}

.change .bar1 {
    transform: translate(0, 9.4px) rotate(-45deg) ;
    transform-origin: center center;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -9.4px) rotate(45deg);
}

Javascript

function transformMenuIcon(arg) {
    console.log(arg.classList);
    arg.classList.toggle("change");
}

CSS 섹션에서 설명했듯이 classList.toggle 메소드를 이해하면 이해하기 어렵지 않을 것이다. 이외에도 다양한 메소드들을 활용할 수 있는데 다음과 같다.

add: 클래스를 추가
remove: 클래스를 제가
item: 인덱스로 클래스를 불러옴
contains: 클래스가 있는지 확인
replace: 이미 있는 클래스를 다른 것으로 교체

느낀점

쉽고 간단하게 만들 수 있는 세련된 UI라고 생각하기 때문에 다음 사이드 프로젝트에 꼭 넣어봐야겠다.

출처

https://developer.mozilla.org/ko/docs/Web/API/Element/classList