CCHub Logo CCHub Tailwind Collection
구성 요소 햄버거 메뉴 Hamburger Menu 컴포넌트

Hamburger Menu 컴포넌트

그라데이션 무지개 색 구성표가 있는 미니멀하고 반응이 빠른 햄버거 메뉴 구성 요소로, 데이트/소셜 플랫폼용으로 설계되었으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="relative bg-white dark:bg-gray-900 md:flex md:items-center md:justify-between p-4 shadow-md">
  <div class="flex items-center justify-between">
    <a href="#" class="text-2xl font-bold bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500 text-transparent bg-clip-text">
      Connectify
    </a>
    <!-- Mobile menu button -->
    <button id="menu-button" class="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-400" aria-label="Toggle menu">
      <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" 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 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>

  <!-- Mobile menu content -->
  <nav id="mobile-menu" class="hidden md:flex md:items-center md:space-x-8 mt-4 md:mt-0">
    <a href="#matches" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Matches</a>
    <a href="#chat" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Chat</a>
    <a href="#discover" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:shadow-outline rounded-lg md:inline md:mt-0">Discover</a>
    <a href="#profile" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Profile</a>
    <a href="#settings" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Settings</a>
  </nav>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>

관련 구성 요소

Hamburger Menu 컴포넌트

블로그/콘텐츠 사이트를 위한 반응형 햄버거 메뉴 구성 요소로, 다크 모드, 회색조 색 구성표 및 HTML 및 Tailwind CSS만을 사용하는 복잡한 대화형 요소를 제공합니다. 최적의 읽기 및 콘텐츠 소비를 위해 설계되었습니다.

열다

브루탈리즘 햄버거 메뉴

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

열다

Hamburger Menu 컴포넌트

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

열다