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

Glassmorphism 햄버거 메뉴

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

미리 보기

HTML 코드 

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

관련 구성 요소

레트로 햄버거 메뉴 구성 요소

복잡한 레트로/빈티지 햄버거 메뉴 구성 요소(유사한 색 구성표, 반응형 디자인 및 어두운 테마 지원).

열다

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

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

열다

3D 햄버거 메뉴 컴포넌트

3D 미학, 따뜻한 중성 색 구성표 및 다크 모드를 지원하는 반응형 햄버거 메뉴 구성 요소로 엔터테인먼트 및 미디어 플랫폼에 적합합니다. 미묘한 3D 호버 효과가 특징입니다.

열다