html/css 드롭다운 메뉴 만들기 [No JavaScript!!]

2024-05-28

---

사진: Unsplash 의 Archee Lal

---

1. 방법

 

::after 선택자를 이용해 가상의 html 영역을 만들고 이후 해당 부분을 hover 하는 방식을 이용해 간단하게 드롭다운 메뉴를 구현할 수 있다. 코드를 살펴보자.

---

2. html

 

<div class="menu">menu
  <div class="sub_menu">
    <div class="sub_menu_info">sub1</div> 
    <div class="sub_menu_info">sub2</div> 
  </div>
</div>

 

코드는 간단하다. 우선적으로 hover 를 진행할 메뉴를 만들고 이후 드롭다운 메뉴리스트를 만들면 된다. 위의 코드에서는 menu 클래스가 호버를 진행할 항목이고 sub_menu 가 드롭다운이 되는 메뉴이다.

---

3. css

 

처음 방법에서 소개했던 것과 같이 menu 에 가상 영역 ::after를 만들고 해당 부분을 호버시에 sub_menu의 display 가 flex 가 되면서 드롭다운 영역이 나타나게 된다.

 

.menu {
    position: relative;
    display: flex;
    z-index: 100;
}
.menu::after {
    cursor: pointer;
    content: "";
    display: block;
    position: absolute;
    bottom: -2rem; 
    left: 0;
    right: 0;
    height: 40px; /* 가상 영역의 높이 */
}

.menu:hover .sub_menu {
    display: flex;
    width: 5rem;
}

.sub_menu {
    display: none;
    position: absolute;
    padding: 0.75rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    bottom: -7rem;
    min-width: 10rem;

    border-radius: 0.25rem;
    background-color: green;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    z-index: 5;
}

.sub_menu_info{
    display: flex;
    width: 5rem;
    height: 1.75rem;
    justify-content: start;
    align-items: center;
    cursor: pointer;
}

---

실제 구현 후 menu 텍스트에 호버링을 해보면 아래와 같은 결과를 볼 수 있다.

---

4. 결과 확인

 

실제 실행 결과는 아래의 링크에서 확인이 가능하다.

 

A Pen by Js Sound (codepen.io)

VwOmeEd

 

---

메인 이미지 출처 :  사진: Unsplash의Archee Lal