구성 요소 탐색 구성 요소 Glassmorphism_Navigation_Simple_Sunset

Glassmorphism_Navigation_Simple_Sunset

일몰/따뜻한 톤의 간단하고 반응이 빠른 glassmorphism 탐색 구성 요소로 비즈니스/기업 웹 사이트에 적합합니다. 반투명 요소가 특징이며 다크 모드를 지원합니다.

미리 보기

HTML 코드

<header class="bg-orange-100 dark:bg-gray-900 shadow-lg">
  <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-xl font-bold text-orange-700 dark:text-orange-300">YourCompany</a>

    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Home</a>
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">About</a>
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Services</a>
      <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-amber-200 transition-colors duration-300">Contact</a>
    </div>

    <!-- Mobile menu button -->
    <button class="md:hidden focus:outline-none">
      <svg class="w-6 h-6 text-orange-700 dark:text-orange-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 overlay (can be shown/hidden with JS, but per instructions, we just have structure) -->
  <div class="md:hidden fixed top-0 left-0 w-full h-full bg-orange-50 dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 backdrop-filter backdrop-blur-md z-50 transform -translate-y-full transition-transform duration-300 ease-in-out">
    <div class="flex flex-col items-center justify-center h-full space-y-6">
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Home</a>
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">About</a>
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Services</a>
        <a href="#" class="text-2xl text-orange-700 hover:text-orange-900 dark:text-orange-300 dark:hover:text-amber-100 transition-colors duration-300">Contact</a>
    </div>
  </div>
</header>

관련 구성 요소

브루탈리즘 소셜 내비게이션

보색이 있는 소셜 미디어를 위한 단순하고 야만적인 탐색 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

스큐어모픽 내비게이션

Skeuomorphic 디자인의 간단하고 반응이 빠른 탐색 구성 요소, 소셜 미디어 응용 프로그램에 적합한 유사한 색 구성표, 어두운 테마 지원.

열다

스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)

스큐어모픽 스타일로 디자인된 탐색 구성 요소로, 보색 구성표를 특징으로 하며, 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다. 여기에는 사용자 참여를 위한 대화형 요소가 포함되어 있습니다.

열다