<CSS> 반응형 웹 디자인 - 메뉴바 (2)

3) 메뉴 바(햄버거) 클릭 시 주메뉴 출현

앞서 가로 너비가 625px 이하일 경우 메뉴 바(햄버거)가 나타나면서 중앙의 주메뉴는 사라지도록 설정하였다. 따라서 이 때에는 메뉴 바(햄버거) 클릭했을 때 주메뉴가 다시 나타날 수 있도록 구현하였다. 코드는 아래와 같다.

 

 

- CSS

우선 첫 번째로 미디어 쿼리에 관계없이 모두 적용되는 내용이다. 위 사진처럼 주메뉴가 하단에 나타나는 스타일에 클래스로 'hidden'을 주고 display 속성을 none 값으로 설정하였다. 이로써 사용자가 행동을 취하지 않는 한 하단에 나타나는 주메뉴는 나타나지 않는다.

 

그리고 이 주메뉴의 id명은 minimenu로 설정하였다. 이것은 가로 너비가 625px 이하일 때만 나타나는 부분이므로, 미디어 쿼리의 중단점을 625px 이하로 설정한 부분에만 아래와 같이 minimenu의 스타일을 지정해두었다.

 

추가적으로 바탕화면 색이 모두 검은색이므로 구별이 어려울 수 있는 점을 고려하여, 사용자의 편의성을 생각해 메뉴에 마우스를 올려두었을 때 hover 효과가 나타나도록 설정하였다.

/* 공통적용 */
.hidden {
  display: none;
}

/* 가로 너비가 625px 이하일 때 미디어 쿼리 내용 */
@media screen and (max-width: 625px) {
  .nav {
    padding: 30px 40px;
  }

  #menu {
    display: none;
  }

  .fab {
    display: none;
  }

  .fas {
    font-size: 2em;
  }

  #minimenu {
    width: 100%;
    height: 30vh;
    background-color: black;
  }

  #minimenu > li {
    font-size: 25px;
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #minimenu > li:hover {
    background-color: orange;
  }
}

 

 

- JS

JS에서는 토글을 이용하였다. classList의 add 메서드와 remove 메서드의 기능을 갖고 있는 메서드로 보면 된다. 따라서 클릭하면 add 메서드가 실행되고, 다시 클릭하면 remove 메서드가 실행되고, 또 다시 클릭하면 add -> remove... 의 순서로 계속해서 실행되는 메서드가 toggle이다. add와 remove 메서드를 굳이 모두 쓰지 않고 toggle 메서드 하나로 기능을 구현할 수 있어 효율성 측면에서 좋다.

 

메뉴 바(햄버거) 클릭 시 이벤트 리스너를 통해 toggle이 작동하여 minimenu의 hidden 클래스 값을 지웠다가, 덧붙였다 하는 방식으로 실행된다. 최초 클릭 시 hidden이 사라져 하단에 minimenu가 나타나며, 다시 클릭하면 hidden이 추가되어 하단에 minimenu가 사라진다.

const bars = document.querySelector(".fas");
const minimenu = document.querySelector("#minimenu");

function onClick() {
  minimenu.classList.toggle("hidden");
}

bars.addEventListener("click", onClick);

 

완성본

 

 

4) 짧은 소감

드림코딩의 <웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript> 강의의 과제로서 만들었다. 반응형 웹이 워낙 많이 쓰이고 있는 부분이라 한 번쯤 구현해보는 연습이 꼭 필요하다는 생각이 들어 구현해보았다. flex와 toggle을 이용하여 위치 및 js 기능을 이렇게 간편하게 만들 수 있었다는 점이 꽤나 인상깊었다. 덕분에 이제 앞으로 이런 기능은 손쉽게 구현할 수 있을 것 같다!