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

메가 메뉴 컴포넌트

스큐어모피즘(Skeuomorphism)으로 스타일링된 반응형 메가 메뉴 컴포넌트로, 테일윈드 CSS를 사용하여 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
    </div>
    <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"/>
      </svg>
    </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6">
    <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
    <div class="flex space-x-4 mt-2">
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 1</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 2</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 3</span>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

메가 메뉴 컴포넌트

블로그/콘텐츠 웹사이트에 대한 Neumorphism 스타일의 Mega Menu Component, Analogous color scheme 및 Moderate complexity를 사용합니다. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.

열다

Glassmorphism 메가 메뉴 컴포넌트

Glassmorphism Mega Menu for Dashboard는 트라이어딕 색 구성표와 인터페이스합니다. 젖빛 유리 효과, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다.

열다

메가 메뉴 컴포넌트 - Neumorphic Vibrant E-commerce

복잡하고 반응이 빠른 메가 메뉴 구성 요소는 뉴모픽하고 생생한 전자 상거래 스타일로 설계되었습니다. 여러 열, 이미지 예제 및 범주 목록을 제공하며 완전한 다크 모드를 지원합니다.

열다