CCHub Logo CCHub Tailwind Collection
구성 요소 드롭다운 메뉴 Glassmorphism 드롭다운 메뉴

Glassmorphism 드롭다운 메뉴

기술/SaaS 애플리케이션에 적합한 자주색/보라색 톤을 사용하는 glassmorphism 디자인의 간단하고 반응이 빠른 드롭다운 메뉴입니다. 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-sm font-medium text-white hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gradient-to-r dark:from-purple-700 dark:to-indigo-800 dark:hover:from-purple-800 dark:hover:to-indigo-900 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600" 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>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform transition ease-out duration-200 scale-100 opacity-100" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1 rounded-md bg-white/30 backdrop-blur-lg border border-white/40 dark:bg-gray-800/30 dark:border-gray-700/40" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">
        Account settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">
        Support
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">
        License
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-100 hover:text-red-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-red-900 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

관련 구성 요소

드롭다운 메뉴 컴포넌트

비즈니스/기업용으로 설계된 반응형 드롭다운 메뉴 구성 요소로, 마이크로 인터랙션과 보색을 특징으로 합니다. 밝은 테마와 어두운 테마를 모두 지원하며 스타일링에 Tailwind CSS를 사용합니다.

열다

Neumorphic 드롭다운 메뉴(그레이스케일)

그레이스케일 색상이 있는 Neumorphic 드롭다운 메뉴. 포트폴리오 사용을 위한 간단한 레이아웃, 다크 모드 지원으로 반응형. 자바스크립트가 없습니다.

열다

Memphis_Vibrant_Marketplace_Dropdown_Menu

마켓플레이스를 위한 복잡하고 반응이 빠른 드롭다운 메뉴 구성 요소로, 생동감 넘치는 멤피스 스타일의 미학으로 디자인되었습니다. 대담한 색상, 기하학적 모양 및 다크 모드 지원이 특징입니다.

열다