CCHub Logo CCHub Tailwind Collection
コンポーネント ハンバーガーメニュー スキューモーフィックハンバーガーメニュー

スキューモーフィックハンバーガーメニュー

レスポンシブなハンバーガーメニューコンポーネントで、スキューモーフィック要素、鮮やかな色、eコマースサイト向けのダークテーマのサポートで設計されています。

プレビュー

HTMLコード 

<div class="flex items-center justify-between p-4 bg-blue-500 dark:bg-blue-800 rounded-lg shadow-lg">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Logo" class="h-8 w-8 rounded-full border-2 border-white">
        <h1 class="text-white text-lg font-bold">ShopEasy</h1>
    </div>
    <button class="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 12h16m-7 6h7" />
        </svg>
    </button>
</div>

<div class="hidden md:flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-2">
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>

<div class="md:hidden">
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mt-2 space-y-2">
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
    </div>
</div>

関連コンポーネント

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

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

開ける

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

ガラスモルフィズムデザインの複雑なレスポンシブハンバーガーメニューコンポーネントで、すりガラスのような半透明の効果が特徴で、作品や製品を展示するポートフォリオに適しています。ダークテーマのサポートが含まれており、スタイリングにはTailwind CSSを利用しています。

開ける

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

ダッシュボード用にデザインされたレスポンシブなハンバーガーメニューコンポーネントで、グレースケールの配色の3Dデザインでスタイル設定されており、明るいテーマと暗いテーマの両方に適しています。

開ける