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;
}