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

Sticky Navigation 구성 요소

기업 및 이벤트 웹 사이트에 적합한 깨끗하고 신뢰할 수 있으며 간단한 스티커 탐색 모음입니다. 밝은 액센트 색상, 완전한 응답성 및 다크 모드 지원을 제공하는 흑백 흑백이 특징입니다.

미리 보기

HTML 코드 

<header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
      </svg>
      <span>EventName</span>
    </a>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
    </div>

    <div class="md:hidden">
      <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
        <svg class="h-7 w-7" 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>
  </nav>
</header>

관련 구성 요소

그레이스케일 스큐어모픽 스티키 내비게이션

블로그를 위한 반응형 끈적끈적한 탐색 모음으로, 회색조 팔레트를 사용하여 스큐어모피즘으로 스타일링되었습니다. 다크 모드 지원 및 간단한 레이아웃이 특징입니다. Tailwind CSS(HTML만 해당)로 빌드되었으며 JavaScript는 없습니다. 스큐어모픽 디자인은 내비게이션 바가 약간 융기된 물리적인 요소처럼 보이도록 하는 것을 목표로 합니다.

열다

Sticky Navigation 구성 요소

스큐어모픽 디자인, 트라이어딕 색 구성표 및 간단한 레이아웃을 갖춘 끈적한 탐색 구성 요소로 소셜 미디어 인터페이스에 적합합니다. 반응형 디자인과 어두운 테마를 지원합니다.

열다

Brutalist Sticky Navigation 컴포넌트

브루탈리스트 스티키 네비게이션 바(Brutalist Sticky Navigation Bar) - 다크 모드를 지원하는 블로그를 위한 그레이스케일(Grayscale)

열다