Компоненты Липкая навигация Компонент «Липкая навигация»

Компонент «Липкая навигация»

Липкий навигационный компонент со скевоморфным дизайном, триадической цветовой гаммой и простой версткой, подходящий для интерфейсов социальных сетей. Он поддерживает адаптивный дизайн и темную тему.

Предварительный просмотр

HTML-код

<nav class="fixed inset-x-0 top-0 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50 transform transition-transform duration-300 ease-in-out hover:-translate-y-1">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <!-- Home Button - Blue/Cyan -->
      <a href="#" class="flex items-center space-x-2 bg-gradient-to-br from-blue-500 to-cyan-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <svg class="w-5 h-5" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0v-9"></path></svg>
        <span class="font-semibold hidden sm:inline">Home</span>
      </a>

      <!-- Notifications Button - Magenta/Pink -->
      <a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-fuchsia-600 to-pink-500 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <svg class="w-5 h-5" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span class="font-semibold hidden sm:inline">Notifications</span>
        <span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">3</span>
      </a>

      <!-- Messages Button - Yellow/Orange -->
      <a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-yellow-500 to-orange-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <svg class="w-5 h-5" 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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
        <span class="font-semibold hidden sm:inline">Messages</span>
        <span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">1</span>
      </a>
    </div>

    <!-- User Avatar - Right side -->
    <div class="relative">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 shadow-md transform hover:scale-110 transition duration-300 ease-in-out cursor-pointer">
      <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 -mb-1 -mr-1"></div>
    </div>
  </div>
</nav>

Связанные компоненты

Оттенки серого Скевоморфный Липкий Навигация

Отзывчивая закрепленная панель навигации для блогов, стилизованная под скевоморфизм с использованием палитры оттенков серого. Особенности поддержки темного режима и простой верстки. Собран с помощью Tailwind CSS (только HTML), без JavaScript. Скевоморфный дизайн направлен на то, чтобы панель навигации выглядела как физический, слегка приподнятый элемент.

Открытый