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

Sticky Navigation 구성 요소

단순하고 깔끔하며 대비가 높은 고정 탐색 모음으로, 고정 공간/개발자 미학을 가지며, 엔터테인먼트 또는 미디어 플랫폼에 적합합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
      </svg>
      <span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="hover:text-white transition duration-300">Discover</a>
      <a href="#" class="hover:text-white transition duration-300">Browse</a>
      <a href="#" class="hover:text-white transition duration-300">Live</a>
      <a href="#" class="hover:text-white transition duration-300">Community</a>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-lime-400 focus:outline-none focus:text-white">
        <svg class="h-6 w-6" 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>

  <!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
  <div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
    <div class="flex flex-col items-center space-y-2 py-2">
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
    </div>
  </div>
</nav>

관련 구성 요소

Sticky Navigation 구성 요소

스큐어모픽 스타일로 설계된 고정 탐색 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래 웹 사이트에 적합합니다.

열다

Sticky Navigation 구성 요소

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

열다

Sticky Navigation 구성 요소

뉴스/저널리즘 웹사이트용으로 설계된 스큐어모픽 스티커 내비게이션 구성 요소로, 밝은 액센트 색상, 응답성 및 다크 모드 지원이 있는 흑백 색 구성표를 특징으로 합니다. 실제 버튼과 오목한 요소를 모방합니다.

열다