햄버거 메뉴 | Code Components Hub

Hamburger Menu 컴포넌트

전자 상거래를 위한 마이크로 인터랙션이 포함된 복잡하고 반응이 빠르며 생생한 햄버거 메뉴 구성 요소로, 슬라이드 아웃 탐색, 카테고리 링크, 검색 창 및 소셜 미디어 아이콘을 특징으로 합니다. 다크 모드를 지원하며 이미지에 Lorem Picsum을 사용합니다.

미리보기 열기

                <div class="relative">
  <input type="checkbox" id="menu-toggle" class="hidden peer" />
  <label for="menu-toggle" class="block cursor-pointer p-4 md:hidden focus:outline-none">
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></div>
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:opacity-0"></div>
    <div class="w-6 h-1 bg-fuchsia-500 transition-all duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></div>
  </label>

  <div class="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-fuchsia-600 to-purple-700 text-white p-5 shadow-lg overflow-auto z-50 transform -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 md:relative md:w-auto md:h-auto md:bg-none md:shadow-none md:translate-x-0 md:flex md:flex-col md:overflow-visible">
    <div class="mb-8 md:hidden">
      <img src="https://www.picsum.photos/100/100" alt="Store Logo" class="rounded-full mx-auto mb-3" />
      <p class="text-center text-lg font-bold">E-Shop</p>
    </div>

    <nav class="md:flex md:flex-col md:space-y-2">
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Shop All</a>
      <div class="relative group">
        <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Categories</a>
        <div class="ml-5 text-sm absolute left-full top-0 w-48 bg-fuchsia-800 p-3 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 invisible group-hover:visible dark:bg-gray-700">
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Electronics</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Apparel</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Home Goods</a>
        </div>
      </div>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Contact</a>
    </nav>

    <div class="mt-8 md:mt-4">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-fuchsia-700 bg-opacity-70 text-white placeholder-fuchsia-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-300 dark:bg-gray-700 dark:placeholder-gray-400" />
    </div>

    <div class="mt-8 pt-8 border-t border-fuchsia-500 border-opacity-50 text-center md:mt-4 md:pt-4 md:border-none">
      <p class="text-sm mb-4">Follow Us</p>
      <div class="flex justify-center space-x-4">
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</div>

Hamburger Menu 컴포넌트

반응형 햄버거 메뉴 구성 요소는 파스텔 색 구성표와 함께 Brutalism 스타일로 디자인되었습니다. 작품이나 제품을 보여주는 포트폴리오에 적합합니다.

미리보기 열기

                <nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Hamburger Icon -->
                <button id="menu-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-label="Main menu">
                    <span class="sr-only">Open main menu</span>
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                </div>
                <div class="hidden sm:block">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a>
                        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Menu Items -->
<div id="menu" class="hidden sm:hidden bg-white dark:bg-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
</div>

<main class="p-6">
    <h1 class="text-center text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/200" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 1</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 1.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/201" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 2</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 2.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/202" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 3</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 3.</p>
            </div>
        </div>
    </div>
</main>

Glassmorphism 햄버거 메뉴

간단하고 반응이 빠른 햄버거 메뉴 구성 요소로, Glassmorphism 디자인, 보색 구성표 및 다크 모드를 지원합니다.

미리보기 열기

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-lg font-semibold">My Blog</div>
    <button class="text-white focus:outline-none lg:hidden">
      <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-4 6h4"></path>
      </svg>
    </button>
    <div class="hidden lg:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
  </div>
</nav>

브루탈리즘 햄버거 메뉴

Tailwind CSS를 사용하여 유사한 색 구성표, 중간 정도의 복잡성, 반응형 디자인 및 어두운 테마를 지원하는 대시보드용 브루탈리즘에서 영감을 받은 햄버거 메뉴 구성 요소. 자바스크립트가 없습니다.

미리보기 열기

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

3D 햄버거 메뉴 컴포넌트

비즈니스/기업 웹사이트를 위한 삼원 색 구성표와 복잡한 대화형 요소를 통합한 3D 디자인의 반응형 햄버거 메뉴입니다.

미리보기 열기

                <div class="relative inline-block text-left">
  <!-- Menu Button -->
  <div>
    <button class="flex items-center p-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none">
      <span class="sr-only">Open menu</span>
      <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" />
      </svg>
    </button>
  </div>

  <!-- Menu Items -->
  <div class="absolute right-0 z-10 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Dashboard</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Team</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Projects</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Calendar</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-gray-700">Reports</a>
    </div>
  </div>
</div>

<div class="flex justify-center mt-8">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Our Team</h2>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
  <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
    <img src="https://picsum.photos/id/1011/200" alt="Team Member" class="rounded-full mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Alice Smith</h3>
    <p class="text-gray-600 dark:text-gray-400">CEO</p>
  </div>
  <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
    <img src="https://picsum.photos/id/1012/200" alt="Team Member" class="rounded-full mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
    <p class="text-gray-600 dark:text-gray-400">CTO</p>
  </div>
  <div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
    <img src="https://picsum.photos/id/1013/200" alt="Team Member" class="rounded-full mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Roe</h3>
    <p class="text-gray-600 dark:text-gray-400">CFO</p>
  </div>
</div>

브루탈리즘 햄버거 메뉴

생생한 색상과 다크 모드를 지원하는 브루탈리즘 스타일의 햄버거 메뉴로, 블로그 또는 콘텐츠 사이트를 위해 설계되었습니다.

미리보기 열기

                <div class="bg-yellow-400 dark:bg-purple-700 p-4 flex justify-between items-center">
  <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Blog</h1>
  <button class="text-black dark:text-white focus:outline-none">
    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5h16v2H4V5zm0 6h16v2H4v-2zm0 6h16v2H4v-2z"/>
    </svg>
  </button>
</div>

Hamburger Menu 컴포넌트

반응형 햄버거 메뉴 구성 요소(다크 모드 포함)

미리보기 열기

                <nav class="bg-stone-100 dark:bg-stone-800 shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          <!-- Website Logo -->
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-stone-500 dark:text-white text-lg font-semibold">Your Logo</span>
          </a>
        </div>
        <!-- Primary Navbar items -->
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Services</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-stone-500 dark:text-white font-semibold hover:text-green-500 transition duration-300">Contact Us</a>
        </div>
      </div>
      <!-- Secondary Navbar items -->
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="" class="py-2 px-2 font-medium text-stone-500 dark:text-white rounded hover:bg-green-500 hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign Up</a>
      </div>
      <!-- Mobile menu button -->
      <div class="md:hidden flex items-center">
        <button class="outline-none mobile-menu-button">
          <svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          <svg class="w-6 h-6 text-stone-500 dark:text-white hover:text-green-500" x-show="showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- Mobile menu -->
  <div class="hidden mobile-menu">
    <ul class="">
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Home</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Services</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">About</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 text-stone-500 dark:text-white hover:bg-green-500 hover:text-white transition duration-300">Contact Us</a></li>
    </ul>
  </div>
</nav>

Hamburger Menu 컴포넌트

미니멀리스트/플랫 디자인의 반응형 햄버거 메뉴 구성 요소는 비즈니스/기업 웹사이트에 적합하며 파스텔 색 구성표를 사용하고 다크 모드를 지원합니다.

미리보기 열기

                <nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
    <div class="flex justify-between items-center">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">
            Logo
        </div>
        <button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
            </svg>
        </button>
    </div>
    <div id="menu" class="hidden mt-4">
        <ul class="flex flex-col space-y-2">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </div>
</nav>
<style>
    @media (min-width: 768px) {
        #menu {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 0;
        }
        #menu-toggle {
            display: none;
        }
    }
</style>

레트로 이커머스 햄버거 메뉴

전자 상거래를 위한 복잡하고 반응이 빠른 다크 모드 지원 햄버거 메뉴 구성 요소로, 레트로/빈티지(80년대/90년대) 미학과 보색(보라색, 청록색, 금색)으로 스타일링되었습니다. 기본 탐색, 계정 링크, 장바구니, 검색 및 확인란 해킹을 사용하는 순수 CSS 토글 기능이 있습니다. Tailwind CSS 클래스를 사용합니다.

미리보기 열기

                <header class="fixed top-0 w-full z-50 bg-white dark:bg-[#1A1A1A] shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <!-- Logo/Site Title -->
        <div class="text-2xl font-bold text-black dark:text-white">RetroShop</div>

        <!-- Hamburger/Cart/Account icons -->
        <div class="flex items-center space-x-4">
             <!-- Account/Cart Icons placeholders -->
             <a href="#account" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Account"><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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></a>
             <a href="#cart" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Cart"><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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></a>
             <!-- Hamburger Label -->
             <label for="menu-toggle" class="block cursor-pointer lg:hidden z-50 w-6 h-6 flex flex-col justify-around focus:outline-none" aria-label="Toggle menu">
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
             </label>
        </div>
    </div>
</header>

<!-- Hidden Checkbox Hack -->
<input type="checkbox" id="menu-toggle" class="hidden">

<!-- Overlay (Sibling to panel) -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden overlay"></div>

<!-- Navigation Panel (Sibling to checkbox) -->
<nav class="fixed top-0 right-0 w-64 md:w-80 lg:w-96 h-full transform translate-x-full transition-transform duration-300 ease-in-out z-50 bg-white dark:bg-[#1A1A1A] border-l-4 border-[#20DACA] dark:border-[#A720DA]" role="navigation" aria-label="Main menu">
    <div class="p-6 overflow-y-auto h-full">
        <!-- Close Button Label -->
        <label for="menu-toggle" class="absolute top-4 right-4 text-3xl font-bold cursor-pointer text-black dark:text-white hover:text-[#FFD700]" aria-label="Close menu">&times;</label>

        <!-- Panel Content -->
        <div class="mt-8">
            <h2 class="text-xl font-bold mb-6 text-black dark:text-white">Menu</h2>

            <!-- Main Navigation -->
            <div class="mb-6 border-b-2 border-[#20DACA] dark:border-[#A720DA] pb-4">
                <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Shop</h3>
                <ul>
                    <li class="mb-2"><a href="#new" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">New Arrivals</a></li>
                    <li class="mb-2"><a href="#sales" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Sales</a></li>
                    <li class="mb-2"><a href="#categories" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Categories</a></li>
                </ul>
            </div>

            <!-- Account/User -->
            <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Account</h3>
                 <div class="flex items-center space-x-3 mb-4">
                     <!-- Avatar -->
                     <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#FFD700]">
                     <span class="text-black dark:text-white">Hello, User!</span>
                 </div>
                 <ul>
                    <li class="mb-2"><a href="#login" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Login / Sign Up</a></li>
                    <li class="mb-2"><a href="#account" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">My Account</a></li>
                 </ul>
            </div>

            <!-- Cart -->
             <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Your Cart</h3>
                 <a href="#cart" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] flex items-center py-1">
                     🛒 Items (3)
                 </a>
             </div>

             <!-- Search (Simple Input) -->
             <div class="mb-6">
                  <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Search</h3>
                  <input type="text" placeholder="Product search..." class="w-full p-2 border-2 border-[#20DACA] dark:border-[#A720DA] bg-white dark:bg-[#1A1A1A] text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFD700] focus:border-transparent">
             </div>

             <!-- Placeholder Image (Optional Retro feel) -->
             <div class="mt-6">
                  <img src="https://picsum.photos/seed/retro-shop-menu/300/200" alt="Retro Shop Image" class="w-full h-auto object-cover border-2 border-[#FFD700]">
             </div>

        </div>
    </div>
</nav>

<!-- Add the CSS for checkbox hack and hamburger animation -->
<style>
    /* Hamburger animation */
    .hamburger-icon {
        display: block;
        width: 1.5rem; /* w-6 */
        height: 0.25rem; /* h-1 */
        margin: 0.25rem 0;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* Show overlay when checkbox is checked */
    #menu-toggle:checked ~ .overlay {
        display: block;
    }

    /* Slide panel into view when checkbox is checked */
    #menu-toggle:checked ~ nav {
        transform: translateX(0);
    }

     /* Animate hamburger icon to X */
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(1) {
        transform: translateY(0.5rem) rotate(45deg); /* Adjust based on margin/height */
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(3) {
        transform: translateY(-0.5rem) rotate(-45deg); /* Adjust based on margin/height */
    }

     /* Hide hamburger label on screens larger than lg breakpoint - Adjust if menu should always be hamburger */
    @media (min-width: 1024px) {
       [for="menu-toggle"] {
             display: none;
         }
    }
     /* On large screens, potentially show a different nav style - Not implemented here as only hamburger was requested */

</style>

Hamburger Menu 컴포넌트

소셜 미디어용으로 설계된 반응형 햄버거 메뉴는 다크 모드 테마와 보색 구성표가 있는 인터페이스입니다.

미리보기 열기

                <div class="lg:hidden">
    <div class="flex items-center justify-between p-5 bg-gray-900 text-white">
        <div class="text-2xl font-bold">SocialApp</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
    <div id="menu" class="absolute top-0 left-0 w-full h-full bg-gray-800 opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out">
        <div class="flex flex-col items-center justify-center h-full space-y-5 text-xl text-white">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500">
            <a href="#" class="hover:text-indigo-300 transition duration-300">Home</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Profile</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Messages</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Settings</a>
        </div>
    </div>
</div>

<style>
  #menu-toggle:focus + #menu {
      opacity: 1;
      pointer-events: auto;
  }
</style>