CCHub Logo CCHub Tailwind Collection
구성 요소 햄버거 메뉴 햄버거 메뉴 구성 요소 19

햄버거 메뉴 구성 요소 19

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

미리 보기

HTML 코드 

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

관련 구성 요소

Hamburger Menu 컴포넌트

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

열다

Hamburger Menu 컴포넌트

멤피스 디자인(Memphis Design)에서 영감을 받은 반응형 햄버거 메뉴 구성 요소로, 세피아/브라운 색상으로 엔터테인먼트/미디어 플랫폼에 적합합니다. 다크 모드 지원과 장난기 넘치는 기하학적 악센트가 포함되어 있습니다.

열다

유기농 그레이스케일 햄버거 메뉴

반응형 햄버거 메뉴 구성 요소로, 회색조 색 구성표를 사용하여 유기적이고 유려한 디자인 스타일을 가지고 있습니다. 문서 또는 Wiki 사이트에 이상적이며, 다크 모드 지원과 메뉴 토글에 대한 부드러운 전환 효과를 제공합니다.

열다