CCHub Logo CCHub Tailwind Collection
コンポーネント メガメニュー メガメニューコンポーネント

メガメニューコンポーネント

Tailwind CSSを使用して構築された、グレースケールの配色を備えたシンプルなダークモードのeコマースメガメニューコンポーネント。これはレスポンシブであり、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>

関連コンポーネント

メガメニューコンポーネント

ダークモードUI、類似の配色、およびダッシュボード用の複雑な複雑さを備えたメガメニューコンポーネント、Tailwind CSSを使用。レスポンシブであり、Tailwind dark:プレフィックスを使用してダークテーマをサポートする必要があります。JavaScript コードは不要で、HTML と Tailwind クラスのみ。画像はpicsum.photosから、アバターは randomuser.me から引用しています。

開ける

メガメニューコンポーネント - ネオングロー

ネオン/グロー効果、温かみのあるニュートラルカラー、ダークモードのサポートを備えたシンプルで応答性の高いメガメニューコンポーネントで、予約/予約システムに適しています。

開ける

メガメニューコンポーネント

Glassmorphismスタイルで設計されたレスポンシブなメガメニューコンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素が特徴で、Tailwind CSSを使用して暗いテーマをサポートします。

開ける