🍔 햄버거 버튼 제작하기

 

요약 

- nav 안에 버튼 태그를 생성한다. 

- 버튼 태그 안에 span 태그를 넣어 css로 라인을 생성해준다. 

- 버튼을 클릭하면 

  gnb 태그에 open 클래스가 있다면 ? open을 삭제해준다 : open을 붙여준다 

 

 

1. semantic html tag 작성 

<nav>
    <button class="hamburger-btn">
    	<span></span>
        <span></span>
        <span></span>
    </button>
    <ul id="gnb">
        <li><a href=#>News</a></li>
        <li><a href=#>Contact</a></li>
        <li><a href=#>About</a></li>
    </ul>
</nav>

 

 

2. JS 작성 

const hamburgerToggle = document.querySelector(".hamburger-btn");
const nav = document.querySelector("nav");

hamburgetToggle.addEventListener("click", () => {
	nav.classList.toggle("open");
    this.classList.toggle("toggled");
});

 

classList.toggle()

 

- 하나의 인수만 있을 때 : 클래스가 존재한다면 제거하고 false 반환, 클래스가 존재하지 않으면 추가하고 true 반환

- 두번째 인수가 있을 때 : 두번째 인수가 true로 평가되면 지정한 클래스 값 추가, false로 평가되면 제거

 

 

 

 

 

 

 

 

Use Semantic HTML to Improve Hamburger Menu Accessibility