Componente di navigazione permanente
Una barra di navigazione appiccicosa pulita, affidabile e reattiva progettata con una combinazione di colori pastello per uso aziendale/professionale, adatta per applicazioni meteorologiche/climatiche. Include il supporto per la modalità oscura.
Codice HTML
<header class="w-full sticky top-0 z-50 shadow-md bg-white dark:bg-gray-800 transition-colors duration-300">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="h-8 w-8 text-blue-400 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a4 4 0 00-4-4H9a5 5 0 00-5 5v2.5a.5.5 0 01-1 0V8a7 7 0 017-7h7a7 7 0 017 7v7a7 7 0 01-7 7h-7a7 7 0 01-7-7v-2.5a.5.5 0 011 0V15z" />
</svg>
<span class="text-xl font-semibold text-gray-800 dark:text-gray-100">WeatherCentral</span>
</div>
<ul class="hidden md:flex space-x-6">
<li><a href="#home" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Home</a></li>
<li><a href="#forecast" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Forecast</a></li>
<li><a href="#climate" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Climate Data</a></li>
<li><a href="#maps" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Maps</a></li>
<li><a href="#about" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">About</a></li>
</ul>
<button class="md:hidden focus:outline-none" aria-label="Toggle menu">
<svg class="w-7 h-7 text-gray-600 dark:text-gray-300" 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>
</nav>
<!-- Mobile Menu (hidden by default, would be toggled with JS) -->
<div class="md:hidden bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 py-2 hidden" id="mobile-menu">
<ul class="flex flex-col space-y-2 px-4">
<li><a href="#home" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Home</a></li>
<li><a href="#forecast" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Forecast</a></li>
<li><a href="#climate" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Climate Data</a></li>
<li><a href="#maps" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Maps</a></li>
<li><a href="#about" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">About</a></li>
</ul>
</div>
</header>Componenti correlati
Componente di navigazione permanente
Una barra di navigazione appiccicosa reattiva che segue le linee guida del Material Design, con una modalità scura.
Componente di navigazione permanente
Barra di navigazione appiccicosa minimalista e reattiva per un sito Web meteo/clima, con colori neutri freddi, supporto per la modalità oscura ed elementi interattivi. Progettato per una complessità media con collegamenti funzionali e una barra di ricerca.
Componente di navigazione permanente
Un componente di navigazione appiccicoso dal design piatto minimalista con una combinazione di colori monocromatica per siti Web aziendali/aziendali. Il design include più elementi interattivi e supporta il tema scuro.