CCHub Logo CCHub Tailwind Collection
구성 요소 드롭다운 메뉴 드롭다운 메뉴 컴포넌트

드롭다운 메뉴 컴포넌트

전자 상거래를 위한 간단한 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>

관련 구성 요소

Brutalism 드롭다운 메뉴

비즈니스 웹사이트에 적합한 회색조의 브루탈리즘 스타일 드롭다운 메뉴 구성 요소입니다. 반응형 디자인과 Tailwind CSS를 사용한 다크 모드 지원을 제공하는 복잡한 다중 요소 인터페이스가 특징입니다.

열다

레트로/빈티지 드롭다운 메뉴

레트로/빈티지 미학으로 전자 상거래를 위해 설계된 복잡한 드롭다운 메뉴 구성 요소로, 단색 색상, 풍부한 인터페이스, 다크 모드 지원을 포함한 반응형 디자인을 특징으로 합니다.

열다

드롭다운 메뉴 컴포넌트

Material Design, Analogous color scheme 및 Tailwind CSS를 사용하는 복잡한 상호 작용을 사용하는 전자 상거래를 위한 드롭다운 메뉴 구성 요소입니다. 반응형이며 JavaScript 없이 어두운 테마를 지원합니다.

열다