CCHub Logo CCHub Tailwind Collection
구성 요소 햄버거 메뉴 브루탈리즘 햄버거 메뉴

브루탈리즘 햄버거 메뉴

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

미리 보기

HTML 코드 

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

관련 구성 요소

Hamburger Menu 컴포넌트

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

열다

Cyberpunk_Hamburger_Menu_Photography

사진 포트폴리오를 위한 간단하고 반응이 빠른 사이버펑크 테마의 햄버거 메뉴로, 어두운 배경, 네온 미학을 위한 밝은 트라이어딕 액센트 색상, 완전한 다크 모드 지원을 특징으로 합니다.

열다

Hamburger Menu 컴포넌트

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

열다