Guidelines
Practice
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
스타일: 메뉴 아이템을 호버할 때의 스타일을 정의합니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help