CCHub Logo CCHub Tailwind Collection
コンポーネント ハンバーガーメニュー ブルータリズムハンバーガーメニュー

ブルータリズムハンバーガーメニュー

ブルータリズムにインスパイアされたダッシュボード用のハンバーガーメニューコンポーネントで、類似の配色、適度な複雑さ、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えています。JavaScript はありません。

プレビュー

HTMLコード 

<div class="bg-gray-200 dark:bg-gray-800 font-mono">
  <div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center">
      <div class="text-xl font-bold text-gray-900 dark:text-gray-100">Dashboard</div>
      <button class="text-gray-900 dark:text-gray-100 focus:outline-none lg:hidden">
        <svg class="h-6 w-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-4 6h4"></path>
        </svg>
      </button>
    </div>

    <div class="hidden lg:block mt-4">
      <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
      </nav>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <div class="fixed inset-0 bg-gray-200 dark:bg-gray-800 z-50 hidden">
    <div class="flex justify-end p-4">
      <button class="text-gray-900 dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <nav class="flex flex-col items-center mt-8 space-y-4">
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
    </nav>
  </div>
</div>

関連コンポーネント

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

eコマースのためのマイクロインタラクションを備えた、複雑で応答性が高く、活気に満ちたハンバーガーメニューコンポーネントで、スライドアウトナビゲーション、カテゴリリンク、検索バー、ソーシャルメディアアイコンを備えています。ダークモードをサポートし、画像にはLorem Picsumを使用します。

開ける

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

ダッシュボードの目的に適した3Dスタイルで設計されたレスポンシブハンバーガーメニューコンポーネント。トライアドカラースキームが組み込まれており、インタラクティブな要素を備えた複雑なインターフェイスを備えており、明るいテーマと暗いテーマの両方をサポートします。

開ける

ハンバーガーメニューコンポーネント19

スケルタルなハンバーガーメニューコンポーネントで、現実世界の要素を模倣したスキューモーフィックなスタイルでデザインされています。レスポンシブで、Tailwind CSSを使用したダークモードのサポートが含まれています。

開ける