구성 요소 고정 탐색 Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

대시보드에 대한 Neumorphism 디자인, 보색 구성표, 적당한 복잡성 및 반응형 어두운 테마 지원을 제공하는 고정 탐색 구성 요소입니다. 이 디자인은 뉴모피즘(Neumorphism) 효과를 위해 부드러운 그림자를 통합하고 보색을 사용하여 시각적으로 매력적인 인터페이스를 만듭니다. 데이터 시각화 및 제어판을 제공하는 대시보드에 적합합니다.

미리 보기

HTML 코드

<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-semibold">Dashboard</div>
    <ul class="flex space-x-6">
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <img class="w-8 h-8 rounded-full"
        src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <button class="dark:text-gray-200 text-gray-800 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
        </svg>
      </button>
    </div>
  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
    }
  </style>
</nav>

관련 구성 요소

고정 탐색(Glassmorphism)

Sticky Navigation Component는 Glassmorphism 스타일, 반응형 및 어두운 테마를 지원합니다.

열다

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

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

열다

Retro_Vintage_Sticky_Navigation_Component

이벤트 또는 컨퍼런스 웹 사이트를 위해 설계된 복잡한 레트로/빈티지에서 영감을 받은 스티커 탐색 모음으로, 부드러운 파스텔 색상, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다. 여기에는 로고, 탐색 링크, 클릭 유도문안 버튼 및 검색 아이콘이 포함됩니다.

열다