구성 요소 메가 메뉴 메가 메뉴 컴포넌트

메가 메뉴 컴포넌트

Glassmorphism 스타일, 단색 색 구성표, 복잡한 복잡성 수준을 가진 Mega Menu 구성 요소, 대시 보드 목적. 어두운 테마를 지원하는 반응형 디자인. Tailwind CSS를 사용합니다. 자바스크립트 코드가 필요하지 않습니다.

미리 보기

HTML 코드

<div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-700 text-white dark:bg-gray-800 dark:bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto mt-10">
  <div class="flex justify-between items-center border-b border-gray-600 dark:border-gray-700 pb-4">
    <h2 class="text-2xl font-semibold">Dashboard Navigation</h2>
    <button class="text-gray-300 hover:text-white focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Overview</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Dashboard Home</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Analytics</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Reporting</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Management</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Users</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Settings</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Permissions</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Projects</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Active Projects</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Archived Projects</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Add New Project</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Support</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6 border-t border-gray-600 dark:border-gray-700 pt-4 flex justify-between items-center">
    <div>
      <p class="text-gray-400 text-sm">Last updated: Today</p>
    </div>
    <div>
      <img class="h-8 w-8 rounded-full ring-2 ring-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
  </div>
</div>

메가 메뉴 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

Neumorphic Mega 메뉴 컴포넌트

메가 메뉴 컴포넌트

메가 메뉴 컴포넌트