드롭다운 메뉴 만들기

 

드롭다운 메뉴

 

<div class="nav-item dropdown">
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
  <div class="dropdown-menu rounded-0 m-0">
    <a href="/mypage" class="dropdown-item">My Page</a>
  </div>
</div>

/********** Index JS **********/

(function ($) {
// Dropdown on mouse hover
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
    if (this.matchMedia("(min-width: 992px)").matches) {
        $dropdown.hover(
        function() {
            const $this = $(this);
            $this.addClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "true");
            $this.find($dropdownMenu).addClass(showClass);
        },
        function() {
            const $this = $(this);
            $this.removeClass(showClass);
            $this.find($dropdownToggle).attr("aria-expanded", "false");
            $this.find($dropdownMenu).removeClass(showClass);
        }
        );
    } else {
        $dropdown.off("mouseenter mouseleave");
    }
});    
})(jQuery);

$(window).on("load resize", function() { ... })
을 통해 윈도우의 로드와 리사이즈 이벤트에 대한 핸들러를 등록한다. 즉, 페이지가 로드되거나 윈도우의 크기가 조정될 때마다 해당 함수가 실행된다.
함수 내부에서는 미디어 쿼리를 사용하여 윈도우의 너비가 992px 이상인지 확인한다.
만약 조건이 참이라면, 드롭다운 메뉴에 대한 hover 이벤트 핸들러를 등록한다. $dropdown.hover()는 드롭다운 메뉴가 호버 됐을 때와 호버가 해제됐을 때의 동작을 정의하는 함수이다. 드롭다운 메뉴가 호버 됐을 때, 해당 요소에 showClass 클래스를 추가하여 메뉴를 보이게 하고, 드롭다운 토글 요소의 aria-expanded 속성을 "true"로 설정한다. 드롭다운 메뉴의 호버가 해제됐을 때, showClass 클래스를 제거하여 메뉴를 감추고, 드롭다운 토글 요소의 aria-expanded 속성을 "false"로 설정한다.
만약 윈도우의 너비가 992px 미만이라면, 드롭다운 메뉴에 대한 hover 이벤트 핸들러를 해제한다. 이렇게 함으로써 작은 화면에서는 호버 이벤트를 사용하지 않고, 클릭 등의 다른 이벤트로 드롭다운 메뉴를 제어할 수 있다.