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

드롭다운 메뉴 컴포넌트

이벤트 및 컨퍼런스 웹 사이트를 위한 깔끔하고 미니멀한 드롭다운 메뉴로, 포레스트 그린 색상 팔레트와 스위스/국제 타이포그래피에서 영감을 받은 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-current 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-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 dark:focus:ring-green-400" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Event Sessions
      <!-- Heroicon name: solid/chevron-down -->
      <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 panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Keynote Speakers</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Panel Discussions</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Workshops</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Networking Events</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">View Full Schedule</a>
    </div>
  </div>
</div>

관련 구성 요소

드롭다운 메뉴 컴포넌트

소셜 미디어 인터페이스를 위한 반응형 드롭다운 메뉴 구성 요소로, 어두운 테마와 파스텔 색 구성표가 있습니다. 눈의 피로를 줄이기 위해 설계된 여러 대화형 요소가 있는 복잡한 구성 요소입니다.

열다

3D_Marketplace_Dropdown_Menu

마켓플레이스 플랫폼용으로 설계된 복잡한 3D에서 영감을 받은 드롭다운 메뉴 구성 요소로, 따뜻한 무채색, 다단계 탐색, 다크 모드 지원을 통한 완전한 응답성을 제공합니다. 미묘한 그림자와 전환을 통해 깊이와 몰입도를 통합합니다.

열다

Memphis_Vibrant_Marketplace_Dropdown_Menu

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

열다