햄버거 메뉴

스큐어모픽 햄버거 메뉴

반응형 햄버거 메뉴 구성 요소는 전자 상거래 사이트를 위한 스큐어모픽 요소, 생생한 색상 및 어두운 테마 지원으로 설계되었습니다.

                <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>

Hamburger Menu 컴포넌트

어두운 테마를 지원하는 Material Design 스타일로 설계된 반응형 햄버거 메뉴 구성 요소로, 대시보드 탐색에 적합합니다.

미리보기 열기

                <div class="bg-gray-800 text-white h-screen flex flex-col">
    <div class="flex justify-between items-center p-5">
        <div class="text-2xl font-bold">Dashboard</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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 id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
        <ul class="space-y-2">
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
        </ul>
    </div>
    <div class="flex-1 p-5">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 1</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 2</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 3</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
        </div>
    </div>
</div>

Hamburger Menu 컴포넌트

글래스모피즘 디자인의 복잡한 반응형 햄버거 메뉴 구성 요소로, 젖빛 유리와 같은 반투명 효과를 특징으로 하며, 작품이나 제품을 전시하는 포트폴리오에 적합합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링을 위해 Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
    <button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
    </button>
    <nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
        <div class="flex flex-col p-4">
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
        </div>
    </nav>
    <div class="mt-5 w-full flex justify-center">
        <img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
    </div>
    <div class="mt-5 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
        <p class="ml-2 text-white">John Doe</p>
    </div>
</div>

Hamburger Menu 컴포넌트

대시보드에 적합한 3D 스타일로 설계된 반응형 햄버거 메뉴 구성 요소입니다. 그것은 트라이어딕 색 구성표를 통합하고 밝은 테마와 어두운 테마를 모두 지원하는 대화형 요소가 있는 복잡한 인터페이스를 가지고 있습니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-16 h-16 mt-8 cursor-pointer group">
        <div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
        <div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
        <div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
    </div>
    <nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
        <ul class="py-2">
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Dashboard</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Reports</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Analytics</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Settings</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Profile</span>
            </li>
        </ul>
    </nav>
</div>

Hamburger Menu 컴포넌트

대시보드용으로 설계된 반응형 햄버거 메뉴 구성 요소로, 밝은 테마와 어두운 테마 모두에 적합한 그레이스케일 색상 구성표의 3D 디자인 스타일입니다.

미리보기 열기

                <div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
    <div class="flex justify-between items-center">
        <div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
        <button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
            <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>
    <nav class="mt-4">
        <ul class="space-y-2">
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Home</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Profile</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Settings</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Logout</a>
            </li>
        </ul>
    </nav>
</div>

Hamburger Menu 컴포넌트

스큐어모픽 햄버거 메뉴 구성 요소는 파스텔 색 구성표와 미니멀한 디자인의 대시보드를 위한 것입니다.

미리보기 열기

                <div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    </div>
    <button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <div class="hamburger"> 
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
        </div>
    </button>
</div>

<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
    <ul class="space-y-2">
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">User Profile</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Settings</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Logout</span>
        </li>
    </ul>
</div>

<style>
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

Hamburger Menu 컴포넌트

Tailwind CSS를 사용하여 브루탈리즘 스타일로 디자인된 반응형 햄버거 메뉴 구성 요소로, 다크 모드 지원과 이미지 및 아바타에 대한 플레이스홀더가 특징입니다.

미리보기 열기

                <div class="flex items-center justify-between p-5 bg-gray-800 text-white">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
        <span class="text-2xl font-bold">Brutalism Menu</span>
    </div>
    <div class="lg:hidden">
        <button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
            <svg class="w-6 h-6 text-white" 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" /></svg>
        </button>
    </div>
    <div class="hidden lg:flex space-x-4">
        <a href="#" class="font-semibold hover:text-gray-400">Home</a>
        <a href="#" class="font-semibold hover:text-gray-400">About</a>
        <a href="#" class="font-semibold hover:text-gray-400">Services</a>
        <a href="#" class="font-semibold hover:text-gray-400">Contact</a>
    </div>
</div>

<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
    <div class="flex flex-col items-center justify-center h-full space-y-4">
        <a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
        <button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
            <svg class="w-6 h-6 text-white" 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" /></svg>
        </button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #1a1a1a; }
    .bg-gray-900 { background-color: #121212; }
}
</style>

Hamburger Menu 컴포넌트

브루탈리즘 디자인의 반응형 햄버거 메뉴 구성 요소로, 높은 대비, 대담한 스타일 및 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <button class="flex items-center justify-center w-10 h-10 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md transition-all">
        <svg class="w-8 h-8" 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"/>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 ease-in-out transform scale-0 origin-top-right">
        <div class="flex flex-col p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10 mb-2">
            <h3 class="text-lg font-bold text-black dark:text-white">Menu Title</h3>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 1</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 2</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

햄버거 메뉴 구성 요소 19

스켈레톤 햄버거 메뉴 컴포넌트는 실제 요소를 모방한 스큐어모픽 스타일로 디자인되었습니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

미리보기 열기

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
  <div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
    <button class="focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" 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="p-4 space-y-4">
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Home</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">About</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Services</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Contact</span>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
    <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
  </div>
</div>

카테고리