CCHub Logo CCHub Tailwind Collection
구성 요소 메가 메뉴 메가 메뉴 컴포넌트

메가 메뉴 컴포넌트

머티리얼 디자인, 트라이어딕 색 구성표, 복잡한 수준, 대시보드 목적, 어두운 테마 지원으로 반응하는 메가 메뉴 구성 요소.

미리 보기

HTML 코드 

<nav class="bg-gray-100 dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div>
        <a href="#" class="text-gray-800 dark:text-white text-xl font-bold">Dashboard</a>
      </div>
      <div class="hidden md:flex space-x-4">
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Analytics</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Overview</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Reports</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Data Sources</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Users</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Manage Users</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Roles & Permissions</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Settings</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">General Settings</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Billing</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-800 dark:text-white focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

관련 구성 요소

메가 메뉴 구성 요소 - Memphis Earth Tones 음식/레스토랑

음식/레스토랑 웹사이트를 위한 반응형 메가 메뉴 구성 요소로, 흙색의 멤피스 디자인에서 영감을 받았습니다. 대담한 색상, 기하학적 모양, 장난기 넘치는 패턴이 특징입니다. 다크 모드 지원이 포함됩니다.

열다

메가 메뉴 컴포넌트

블로그/콘텐츠 소비를 위해 설계된 반응형 메가 메뉴 구성 요소로, 마이크로 인터랙션과 어스 톤 색상에 중점을 두고 있으며, Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

ArtDecoPhotography메가메뉴

보석 톤의 아르데코 스타일로 디자인된 단순하고 반응이 빠른 메가 메뉴 구성 요소로, 사진 포트폴리오에 적합합니다. 다크 모드 지원이 포함됩니다.

열다