Componente del menu dell'hamburger
Un componente di menu per hamburger reattivo dal design minimalista/piatto adatto per siti Web aziendali/aziendali, utilizzando una combinazione di colori pastello e supportando la modalità oscura.
Codice HTML
<nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">
Logo
</div>
<button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
<div id="menu" class="hidden mt-4">
<ul class="flex flex-col space-y-2">
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
</ul>
</div>
</nav>
<style>
@media (min-width: 768px) {
#menu {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 0;
}
#menu-toggle {
display: none;
}
}
</style>Componenti correlati
Componente del menu dell'hamburger
Un complesso componente reattivo per il menu dell'hamburger con design glassmorphism, caratterizzato da un effetto traslucido simile al vetro smerigliato, adatto per un portfolio che mostra lavori o prodotti. Include un supporto per il tema scuro e utilizza Tailwind CSS per lo stile.
Componente del menu dell'hamburger
Un componente di menu per hamburger complesso, reattivo e vivace con microinterazioni per l'e-commerce, con una navigazione a scorrimento, collegamenti alle categorie, una barra di ricerca e icone dei social media. Supporta la modalità oscura e utilizza Lorem Picsum per le immagini.
Componente Menu Hamburger 3D
Un menu hamburger reattivo con un design 3D che incorpora una combinazione di colori triadica ed elementi interattivi complessi per siti Web aziendali/aziendali.