Компонент «Липкая навигация»
Простая, чистая и высококонтрастная липкая навигационная панель с эстетикой монопространства/разработчика, подходящая для развлекательных или мультимедийных платформ.
HTML-код
<nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo/Brand Section -->
<div class="flex items-center space-x-2">
<svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
</svg>
<span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
</div>
<!-- Desktop Navigation Links -->
<div class="hidden md:flex space-x-8">
<a href="#" class="hover:text-white transition duration-300">Discover</a>
<a href="#" class="hover:text-white transition duration-300">Browse</a>
<a href="#" class="hover:text-white transition duration-300">Live</a>
<a href="#" class="hover:text-white transition duration-300">Community</a>
</div>
<!-- Mobile Menu Button (Hamburger Icon) -->
<div class="md:hidden">
<button class="text-lime-400 focus:outline-none focus:text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
<div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
<div class="flex flex-col items-center space-y-2 py-2">
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
</div>
</div>
</nav>Связанные компоненты
Компонент «Липкая навигация»
Адаптивный компонент липкой навигации, стилизованный в соответствии с принципами Material Design с использованием Tailwind CSS, с темной темой и случайными изображениями-заполнителями и аватаром.
Компонент липкой навигации - неоморфная пастель
Сложный, липкий навигационный компонент со стилем дизайна Neumorphism и пастельной цветовой гаммой, подходящий для документации или вики-сайтов. Он имеет вложенные элементы навигации, строку поиска и поддержку темного режима, и все это реализовано с помощью HTML и Tailwind CSS для полной адаптивности.
Компонент «Липкая навигация»
Компонент липкой навигации в темном режиме для электронной коммерции, использующий дополнительную цветовую схему и базовую верстку.