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>

関連コンポーネント

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

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

開ける

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

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

開ける

Glassmorphismハンバーガーメニュー

シンプルでレスポンシブなハンバーガーメニューコンポーネントで、Glassmorphismデザイン、補色スキーム、ダークモードのサポートを備えています。

開ける