웹페이지 마크업하기 | 공공데이터 포털

공공데이터 포털

위 사이트를 마크업하고 있습니다.

 

📄 

 

font-sixe : 반응형에 적합한 사이즈를 위해 rem 단위를 사용함

 

 

 

📄 문제해결  (✅ 해결완료 / ❎ 해결중)

 

창크기 조절시 메뉴 아이템은 고정되게 하기

✅ 아이템을 감싸는 div를 만들어 원하는 width값을 준다.

 

button focus시 dropdown menu 활성화

✅ e.target이 달라지면dropdown show classlist 제거

 

// //header button focus시 drop menu 활성화
const dropButton = document.querySelectorAll(".js-dropbutton");
const dropDownContent = document.querySelectorAll(".header-dropmenu-content");

for (let i = 0; i < dropButton.length; i++) {
  dropButton[i].addEventListener("click", function (e) {
    if (!dropDownContent[i].classList.contains("show")) {
      dropDownContent[i].classList.add("show");
      closeDropMenu(e);
    }
  });
}

function closeDropMenu(e) {
  for (let i = 0; i < dropButton.length; i++) {
    if (e.target !== dropButton[i]) {
      dropDownContent[i].classList.remove("show");
    }
  }
}

 

- 버튼과 드롭메뉴를 for문으로 돌리면서 dropmenu에 show class가 있는지 확인하며, 없으면 class를 add한다.

- add와 동시에 다른 버튼을 클릭한 경우 이전 dropmenu에 있는 show class는 remove 시킨다.

 

❎ 여기까지 dropdown menu는 실행되지만 원하는 건, 버튼이 아닌 다른 영역 클릭시 열려있는 dropmenu를 접는 것이다.