CCHub Logo CCHub Tailwind Collection
구성 요소 항행 미니멀리스트 보석 톤 음식/레스토랑 내비게이션

미니멀리스트 보석 톤 음식/레스토랑 내비게이션

음식 및 레스토랑 웹사이트를 위한 미니멀하고 반응이 빠른 탐색 구성 요소로, 보석 톤, 다크 모드 지원 및 깔끔하고 평평한 디자인을 특징으로 합니다. 로고, 탐색 링크, 클릭 유도문안 버튼이 포함되어 있으며 모바일 친화적인 햄버거 메뉴가 있습니다.

미리 보기

HTML 코드 

<nav class="bg-emerald-600 dark:bg-emerald-900 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-1.636 6.364l-.707-.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M9 11a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0zm-9 9a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z"></path>
      </svg>
      <span class="text-white text-xl font-bold font-serif">FoodieFinds</span>
    </a>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#menu" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#how-it-works" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        How It Works
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#restaurants" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Restaurants
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#contact" class="text-white hover:text-emerald-200 transition-colors duration-300 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>

    <!-- Call to Action Button -->
    <div class="hidden md:block">
      <button class="bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none focus:ring-2 focus:ring-emerald-200 rounded-md p-1" aria-label="Toggle menu">
        <svg class="h-7 w-7" 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>
    </div>
  </div>

  <!-- Mobile Navigation Menu (hidden by default, would be toggled by JS) -->
  <!-- For demonstration, using simple display classes; in a real app, you'd use JS to toggle 'hidden' -->
  <div class="md:hidden hidden bg-emerald-700 dark:bg-emerald-800 py-2" id="mobile-menu">
    <a href="#menu" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Menu</a>
    <a href="#how-it-works" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">How It Works</a>
    <a href="#restaurants" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Restaurants</a>
    <a href="#contact" class="block px-4 py-2 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">Contact</a>
    <div class="px-4 py-2">
      <button class="w-full bg-white text-emerald-700 dark:bg-emerald-700 dark:text-white px-5 py-2 rounded-full font-semibold hover:bg-emerald-100 dark:hover:bg-emerald-600 transition-all duration-300 shadow-md">
        Order Now
      </button>
    </div>
  </div>
</nav>

관련 구성 요소

3D_Earth_Tone_Dating_Social_Navigation

데이트/소셜 플랫폼을 위한 반응형 내비게이션 구성 요소로, 어스 톤과 다크 모드를 지원하는 3D에서 영감을 받은 디자인을 특징으로 합니다. 프로필 아바타, 검색 및 핵심 탐색 링크와 같은 대화형 요소가 포함됩니다.

열다

모노스페이스 소셜 미디어 네비게이션

소셜 미디어 애플리케이션을 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 음소거된 색상과 어두운 모드를 지원하는 고정 공간/개발자 미학을 특징으로 합니다. 사용자 프로필, 검색, 알림 및 기본 탐색 링크가 포함됩니다.

열다

Bauhaus Jewel Tone 내비게이션

기하학적 형태와 보석 톤을 가진 간단하고 기능적인 탐색 구성 요소로, 예약/예약 시스템을 위해 설계되었습니다. 반응성 및 다크 모드 지원이 특징입니다.

열다