구성 요소 드롭다운 메뉴 드롭다운 메뉴 컴포넌트

드롭다운 메뉴 컴포넌트

전자 상거래를 위한 간단한 glassmorphism 스타일의 드롭다운 메뉴 구성 요소로, 반응형 디자인과 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
      </form>
    </div>
  </div>
</div>

관련 구성 요소

드롭다운 메뉴 컴포넌트

Tailwind CSS를 사용하는 Glassmorphism 디자인의 반응형 드롭다운 메뉴로, 다크 모드를 지원하고 흐릿한 배경 효과를 제공합니다.

열다

드롭다운 메뉴 컴포넌트

드롭다운 메뉴 구성 요소에는 마이크로 인터랙션, 생생한 색상, 포트폴리오를 위한 간단한 레이아웃이 포함되어 있으며 반응형 디자인과 어두운 테마를 지원합니다.

열다

드롭다운 메뉴 구성 요소 5

다크 모드용으로 설계된 반응형 드롭다운 메뉴 구성 요소로, 스타일링 및 레이아웃에 Tailwind CSS를 활용합니다. 이 구성 요소는 세련된 디자인, 호버 효과 및 어두운 테마 지원을 특징으로 하여 현대적인 UI 경험을 보장합니다.

열다