CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

블로그를 위한 미니멀하고 반응이 빠른 끈적한 탐색 모음으로, 생생한 색 구성표를 특징으로 합니다. 다크 모드를 지원하며 왼쪽에는 "블로그 제목", 오른쪽에는 탐색 링크가 있는 간단하고 깔끔한 레이아웃이 있습니다. 탐색 모음은 사용자가 스크롤할 때 뷰포트 맨 위에 고정됩니다.

미리 보기

HTML 코드 

<nav class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 p-4 shadow-md sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Blog Title -->
    <a href="#" class="text-white text-2xl font-bold dark:text-gray-100">Blog Title</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Home</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Categories</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Contact</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, can be shown with JS) -->
  <div class="md:hidden mt-4 space-y-2">
    <!-- Hidden for this pure HTML example as JS is not allowed -->
  </div>
</nav>

관련 구성 요소

Sticky Navigation 구성 요소

마이크로 인터랙션과 트라이어드 색 구성표로 설계된 반응형 고정 탐색 모음으로, 블로그 및 콘텐츠 소비에 적합합니다.

열다

Sticky Navigation 구성 요소

기업 및 전문 웹사이트, 특히 구인 게시판 및 경력 플랫폼에 적합한 간단하고 깨끗하며 신뢰할 수 있는 끈적한 탐색 모음입니다. 고대비 색상, 응답성 및 다크 모드 지원이 특징입니다.

열다

스티키 내비게이션 컴포넌트 - Neumorphic Pastel

Neumorphism 디자인 스타일과 파스텔 색 구성표가 있는 복잡하고 끈적한 탐색 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 중첩된 탐색 항목, 검색 창 및 다크 모드 지원 기능이 있으며, 모두 완전한 응답성을 위해 HTML 및 Tailwind CSS로 구현됩니다.

열다