구성 요소 드롭다운 메뉴 아르데코 드롭다운 메뉴

아르데코 드롭다운 메뉴

아르데코 디자인 스타일과 레트로/빈티지 색상 팔레트가 있는 간단하고 반응이 빠른 드롭다운 메뉴 구성 요소로 제조/산업 회사에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드

<div class="font-sans relative inline-block text-left group">
  <button class="relative z-10 p-4 min-w-[120px] bg-slate-200 text-slate-800 font-medium tracking-wide border-b-4 border-amber-600 shadow-md transition-all duration-300 ease-in-out
                   dark:bg-slate-700 dark:text-slate-200 dark:border-blue-300
                   hover:bg-amber-300 hover:text-slate-900 hover:shadow-lg dark:hover:bg-blue-600 dark:hover:text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-blue-400 dark:focus:ring-offset-slate-800">
    <span class="flex items-center justify-between">
      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>
    </span>
    <div class="absolute inset-0 border-t-4 border-l-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 group-hover:translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
    <div class="absolute inset-0 border-r-4 border-b-4 border-gray-400 opacity-0 group-hover:opacity-100 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-all duration-300 ease-in-out dark:border-gray-600"></div>
  </button>

  <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg
              bg-slate-100 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible
              group-hover:opacity-100 group-hover:visible translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-in-out transform
              dark:bg-slate-800 dark:ring-white dark:ring-opacity-10">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-0">Production</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-1">Inventory</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-2">Logistics</a>
      <a href="#" class="block px-4 py-3 text-sm text-slate-700 font-medium
                        hover:bg-amber-200 hover:text-slate-900
                        dark:text-slate-300 dark:hover:bg-blue-700 dark:hover:text-white"
         role="menuitem" tabindex="-1" id="menu-item-3">Maintenance</a>
    </div>
  </div>
</div>

관련 구성 요소

드롭다운 메뉴 컴포넌트

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

열다

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

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

열다

드롭다운 메뉴 컴포넌트

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

열다