Siamo quasi giunti alla fine di questa mini guida per rendere il nostro template CSS un po' più nostro. All'appello non dimentichiamo però il menù in cima alla pagina che, insieme al logo, è uno degli strumenti più importanti in un layout web dato che accompagnerà l'utente per tutta la navigazione e lo aiuterà a spostarsi tra le sezioni.
Molti framework forniscono un design minimale, composto da tag a che cambiano sfumatura di colore al passaggio del mouse. Noi però vogliamo di più, vogliamo rendere più chiara la possibilità di navigare verso quella sezione. Per questo motivo inseriamo, all'interno dell'after del contenitore una linea vuota di larghezza 0, che diventerà 100% tramite l'effetto hover.
<!-- [...] --> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> <!-- [...] -->
.nav-link { position: relative; display: inline-block; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #007bff; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; }
Se all'interno del menù abbiamo delle icone, possiamo anche prevedere una loro animazione, analogamente a quanto abbiamo visto negli script precedenti.
<i class="fas fa-home custom-icon"></i>
.custom-icon { transition: transform 0.3s ease, color 0.3s ease; color: #007bff; } .custom-icon:hover { transform: scale(1.2) rotate(10deg); color: #ff5722; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Configurare e gestire sidecar container in Azure App Service
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Eseguire script pre e post esecuzione di un workflow di GitHub
Recuperare l'ultima versione di una release di GitHub
Generare una User Delegation SAS in .NET per Azure Blob Storage
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Utilizzare una qualunque lista per i parametri di tipo params in C#
Utilizzare Hybrid Cache in .NET 9
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Eliminare una project wiki di Azure DevOps
Migliorare la scalabilità delle Azure Function con il Flex Consumption