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

드롭다운 메뉴 컴포넌트

Tailwind CSS를 사용하여 마이크로 인터랙션 및 어두운 테마 지원으로 설계된 반응형 드롭다운 메뉴 구성 요소입니다.

미리 보기

HTML 코드

<div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      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.23 7.21a.75.75 0 011.06 0L10 10.39l3.71-3.18a.75.75 0 111 1.12l-4.25 3.5a.75.75 0 01-1 0l-4.25-3.5a.75.75 0 010-1.12z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="dropdown-content origin-top-right absolute left-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none transition ease-out duration-100 transform scale-95 opacity-0">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" />
        My Account
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" />
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  [data-theme="dark"] .dropdown-content {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .dropdown-content:hover {
    opacity: 1;
    transform: scale(1);
  }
</style>

관련 구성 요소

3D 드롭다운 메뉴 컴포넌트

포트폴리오 전시를 위해 설계된 생생한 색 구성표가 있는 반응형 드롭다운 메뉴 구성 요소입니다. 다크 모드에 적합한 인터랙티브 요소가 있는 3D 디자인이 특징입니다.

열다

레트로 블로그 드롭다운 메뉴

블로그 콘텐츠를 위한 반응형 레트로 빈티지 드롭다운 메뉴입니다. 간단한 트라이어딕 색 구성표와 Tailwind CSS를 사용한 다크 모드 지원이 특징입니다. 자바스크립트가 없습니다.

열다

드롭다운 메뉴 컴포넌트

Glassmorphism 스타일로 디자인된 드롭다운 메뉴 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다