Barre de navigation rétro
Une barre de navigation rétro/vintage réactive et contrastée adaptée aux sites Web de restauration, avec une esthétique des années 80/90 et une prise en charge du mode sombre.
HTML Code
<nav class="bg-red-600 dark:bg-gray-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono text-white p-4 shadow-xl z-50 relative">
<div class="container mx-auto flex justify-between items-center">
<!-- Logo/Brand Name -->
<a href="#" class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-yellow-300 dark:text-yellow-400 leading-none tracking-tight transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
<span class="block">BURGER</span>
<span class="block -mt-3 sm:-mt-4 lg:-mt-6 ml-4 text-white dark:text-gray-200 text-3xl sm:text-4xl lg:text-5xl">BLAST!</span>
</a>
<!-- Mobile Menu Button -->
<div class="md:hidden flex items-center">
<button id="menu-button" class="text-white focus:outline-none focus:ring-4 focus:ring-yellow-400 dark:focus:ring-yellow-600 p-2 rounded-lg bg-yellow-400 dark:bg-yellow-600 border-2 border-white transform hover:scale-105 transition-transform duration-200 ease-in-out">
<svg class="w-8 h-8" 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>
<!-- Desktop Navigation Links -->
<div class="hidden md:flex space-x-6 lg:space-x-8 text-2xl lg:text-3xl font-bold uppercase tracking-wider">
<a href="#" class="relative group transition-all duration-200 ease-in-out">
HOME
<span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="relative group transition-all duration-200 ease-in-out">
MENU
<span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="relative group transition-all duration-200 ease-in-out">
LOCATIONS
<span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="relative group transition-all duration-200 ease-in-out flex items-center space-x-2">
CART
<svg class="w-7 h-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span class="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full absolute -top-2 -right-3 border-2 border-white dark:border-gray-900">3</span>
<span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</div>
</div>
<!-- Mobile Menu (initially hidden, shown with JS) -->
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-red-600 dark:bg-gray-900 border-t-4 border-yellow-400 dark:border-yellow-600 pb-4 shadow-xl z-40">
<div class="flex flex-col items-center space-y-4 text-2xl font-bold uppercase py-4">
<a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">HOME</a>
<a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">MENU</a>
<a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">LOCATIONS</a>
<a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out flex items-center justify-center space-x-2">
<span>CART</span>
<svg class="w-7 h-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
<span class="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full">3</span>
</a>
</div>
</div>
</nav>
<!-- Simple JavaScript for mobile menu toggle -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const menuButton = document.getElementById('menu-button');
const mobileMenu = document.getElementById('mobile-menu');
menuButton.addEventListener('click', function () {
mobileMenu.classList.toggle('hidden');
});
});
</script>Composants associés
3D_Vibrant_Simple_Job_Career_Navigation
Un composant de navigation simple, dynamique et réactif avec des effets 3D subtils, conçu pour les sites d’emploi et les plateformes de développement de carrière. Inclut la prise en charge du mode sombre.
E-commerce Matériel Design Navigation
Un composant de navigation e-commerce complexe, réactif et monochrome inspiré de Material Design, comprenant des liens de recherche, de panier, de profil d’utilisateur et de catégorie avec prise en charge du mode sombre.
Composant de navigation rétro
Un composant de navigation de style rétro avec une esthétique vintage des années 80/90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.