CCHub Logo CCHub Tailwind Collection
组件 超级菜单 Mega Menu 组件

Mega Menu 组件

一个简单的深色模式电子商务大型菜单组件，具有灰度配色方案，使用 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>

相关组件

Mega Menu 组件

使用 Tailwind CSS 的具有深色模式 UI、类似配色方案和复杂复杂性的 Mega Menu Component，用于仪表板目的。它应该是响应式的，并使用 Tailwind dark： 前缀支持深色主题。无需 JavaScript 代码，只需使用 Tailwind 类的 HTML。图片来自 picsum.photos，头像来自 randomuser.me。

打开

复古风格大菜单

一个受80年代和90年代美学启发的复古/复古风格响应式大菜单组件，具有黑暗主题支持和占位符图像。

打开

Mega Menu 组件

具有极简/扁平化设计、充满活力的配色方案、复杂复杂性级别的大型菜单组件，用于仪表板用途，使用 Tailwind CSS。支持深色主题的响应式设计。没有 JavaScript 代码，只有带有 Tailwind 类的 HTML。深色模式使用 Tailwind 的 dark： 前缀进行样式设置。图像使用 picsum.photos 和 randomuser.me 作为头像。

打开