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

Hamburger Menu 컴포넌트

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

미리 보기

HTML 코드 

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

관련 구성 요소

Hamburger Menu 컴포넌트

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

열다

Cyberpunk_Hamburger_Menu_Photography

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

열다

Hamburger Menu 컴포넌트

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

열다