웹 애플리케이션을 개발할 때 드롭다운 메뉴는 매우 일반적으로 사용되는 기능입니다. HTML과 CSS만으로는 기능을 구현하기 어렵기 때문에 자바스크립트와 CSS Grid를 사용하여 드롭다운 메뉴를 구현하는 방법을 알아보겠습니다.

1. HTML 구조 설정하기

드롭다운 메뉴를 구현하기 위해 먼저 HTML 구조를 설정해야 합니다. 일반적으로 <nav> 태그 안에 <ul> 태그로 메뉴 항목들을 구성하고, 각 항목에 <li> 태그로 구성합니다. 드롭다운 메뉴의 하위 메뉴를 추가하기 위해 <ul> 태그를 중첩하여 사용합니다.

<nav>
  <ul>
    <li><a href="#">메뉴 1</a></li>
    <li><a href="#">메뉴 2</a>
      <ul>
        <li><a href="#">서브메뉴 1</a></li>
        <li><a href="#">서브메뉴 2</a></li>
      </ul>
    </li>
    <li><a href="#">메뉴 3</a></li>
  </ul>
</nav>

2. CSS Grid를 사용하여 드롭다운 메뉴 스타일링하기

CSS Grid는 강력한 레이아웃 시스템으로, 드롭다운 메뉴를 구성하기에 이상적입니다. display: grid 속성을 사용하여 <ul> 태그를 그리드 컨테이너로 설정하고, grid-template-columns 속성을 사용하여 메뉴 항목들을 원하는 크기와 위치로 배치합니다.

nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

nav ul li {
  position: relative;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

nav ul li:hover > ul {
  display: grid;
}

nav ul li a {
  padding: 10px;
  background-color: #f1f1f1;
  text-decoration: none;
  color: #333;
}

nav ul ul li a {
  background-color: #fff;
}

3. 자바스크립트를 사용하여 드롭다운 메뉴 토글하기

드롭다운 메뉴의 하위 메뉴를 표시하고 감추기 위해 자바스크립트를 활용합니다. EventListeners를 등록하여 메뉴 항목에 마우스를 올렸을 때 하위 메뉴가 나타나도록 처리합니다.

const menuItems = document.querySelectorAll('nav ul li');

menuItems.forEach((menuItem) => {
  menuItem.addEventListener('mouseover', () => {
    const subMenu = menuItem.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'grid';
    }
  });

  menuItem.addEventListener('mouseleave', () => {
    const subMenu = menuItem.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'none';
    }
  });
});

마무리

이제 자바스크립트와 CSS Grid를 사용하여 웹 애플리케이션의 드롭다운 메뉴를 구현하는 방법을 알아보았습니다. HTML 구조를 설정하고 CSS Grid를 사용하여 스타일링한 뒤, 자바스크립트를 활용하여 토글 기능을 구현해 주세요. 이를 통해 사용자 친화적인 드롭다운 메뉴를 만들 수 있을 것입니다. #JavaScript #CSSGrid