본문으로 건너뛰기

Dropdown 메뉴 디자인 및 구현

Dropdown 메뉴는 클릭하거나 호버(마우스 오버) 할 때 추가적인 메뉴 옵션을 표시하는 UI 컴포넌트입니다. 주로 내비게이션 메뉴, 설정 메뉴 등에서 사용됩니다.


코드 분석

HTML

<div class="dropdown">
<img
class="dropdown-icon"
src="https://assets.codefriends.net/templates/web/portfolio-2/assets/hamburger.png"
/>
<ul class="dropdown-content">
<li><a href="#intro">WORK</a></li>
<li><a href="#career">PROJECT</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>
</div>
  • .dropdown: 전체 Dropdown 메뉴를 감싸는 부모 요소입니다.

  • .dropdown-icon: Dropdown 메뉴를 클릭하거나 호버할 때 사용하는 아이콘입니다. 여기서는 햄버거 아이콘을 사용했습니다.

  • .dropdown-content: Dropdown 메뉴의 내용을 포함하는 부모 요소입니다. ul 요소를 사용하여 리스트 형태로 메뉴 아이템들을 정의하였습니다.


CSS

.dropdown {
position: relative;
display: none;
cursor: pointer;
margin-right: 24px;
}

.dropdown-icon {
width: 20px;
height: 20px;
}

.dropdown-content {
display: none;
position: absolute;
right: 0px;
margin-top: 22px;
min-width: 200px;
background-color: #fffcf9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 20;
}

.dropdown:hover {
padding-left: 200px;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown-content li {
font-size: 18px;
font-weight: 500;
cursor: pointer;
}

.dropdown-content li a {
display: block;
width: 100%;
height: 100%;
padding: 12px 16px;
text-decoration: none;
color: inherit;
cursor: pointer;
}

.dropdown-content li:hover {
color: #000;
background-color: #ddd;
}
  • .dropdown 스타일: Dropdown 메뉴의 부모 요소에 대한 기본 스타일을 정의합니다.

  • .dropdown-icon 스타일: 아이콘의 크기를 지정합니다.

  • .dropdown-content 스타일: 메뉴 내용에 대한 스타일을 정의합니다. 초기 상태에서는 display: none;으로 설정하여 보이지 않게 합니다.

  • .dropdown:hover .dropdown-content 스타일: Dropdown 메뉴를 호버할 때 메뉴 내용을 보이게 합니다.

  • .dropdown-content li.dropdown-content li a 스타일: 메뉴 아이템과 해당 링크에 대한 스타일을 정의합니다.

  • .dropdown-content li:hover 스타일: 메뉴 아이템을 호버할 때의 스타일을 정의합니다.