본문으로 건너뛰기
실습하기

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 스타일: 메뉴 아이템을 호버할 때의 스타일을 정의합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!