Sticky Navigation 구성 요소

깨끗하고 신뢰할 수 있으며 반응이 빠른 끈적한 탐색 모음은 기업/전문가용으로 파스텔 색상으로 설계되었으며 날씨/기후 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드

<header class="w-full sticky top-0 z-50 shadow-md bg-white dark:bg-gray-800 transition-colors duration-300">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-blue-400 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a4 4 0 00-4-4H9a5 5 0 00-5 5v2.5a.5.5 0 01-1 0V8a7 7 0 017-7h7a7 7 0 017 7v7a7 7 0 01-7 7h-7a7 7 0 01-7-7v-2.5a.5.5 0 011 0V15z" />
      </svg>
      <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">WeatherCentral</span>
    </div>

    <ul class="hidden md:flex space-x-6">
      <li><a href="#home" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Home</a></li>
      <li><a href="#forecast" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Forecast</a></li>
      <li><a href="#climate" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Climate Data</a></li>
      <li><a href="#maps" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Maps</a></li>
      <li><a href="#about" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">About</a></li>
    </ul>

    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-7 h-7 text-gray-600 dark:text-gray-300" 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>
  </nav>

  <!-- Mobile Menu (hidden by default, would be toggled with JS) -->
  <div class="md:hidden bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 py-2 hidden" id="mobile-menu">
    <ul class="flex flex-col space-y-2 px-4">
      <li><a href="#home" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Home</a></li>
      <li><a href="#forecast" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Forecast</a></li>
      <li><a href="#climate" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Climate Data</a></li>
      <li><a href="#maps" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Maps</a></li>
      <li><a href="#about" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">About</a></li>
    </ul>
  </div>
</header>

Sticky Navigation 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

고정 탐색 컴포넌트 - 다크 모드 파스텔