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

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 구축된 회색조 색 구성표가 있는 간단한 다크 모드 전자 상거래 메가 메뉴 구성 요소입니다. 반응형이며 Tailwind의 dark: 접두사를 사용하여 어두운 테마에 대한 지원을 포함합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-950 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">ShopName</a>
    <div class="hidden md:flex space-x-6">
      <div class="relative group">
        <button class="hover:text-gray-300">Categories</button>
        <div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
          <a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-gray-300">Sales</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="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>
</nav>

관련 구성 요소

Glassmorphism_Pastel_Mega_Menu

대시보드 탐색에 적합한 glassmorphism 디자인, 파스텔 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 메가 메뉴 구성 요소입니다. 흐림 효과가 있는 반투명 반투명 요소가 특징입니다.

열다

메가 메뉴 컴포넌트

대시보드를 위한 복잡한 3D에서 영감을 받은 반응형 메가 메뉴입니다. 트라이어딕 색 구성표를 사용하고 다크 모드를 지원하며 데이터 시각화 및 제어판을 위한 여러 대화형 섹션을 제공합니다.

열다

스큐어모피즘 소셜 미디어 메가 메뉴

스큐어모피즘 디자인, 트라이어딕 색 구성표 및 소셜 미디어 목적을 위한 단순 복잡성을 갖춘 Mega Menu 구성 요소. 어두운 테마 지원으로 반응형입니다.

열다