Nella scorsa lezione abbiamo dato forma alla Home Page del nostro sito Web inserendo ogni elemento che volevamo fosse presente senza alcun limite di personalizzazione grazie all'integrazione di HTML e CSS. Arrivati a questo punto la situazione è la seguente:
In questa lezione ci concentreremo invece sullo sviluppo del menu di navigazione. È dunque arrivato il momento di creare nuove pagine da collegare all'interno della nostra navbar.
Guida alla creazione di un menu di navigazione personalizzato
Apriamo la dashboard di WordPress e raggiungiamo la sezione "Pagine". Creiamo quindi le seguenti pagine da linkare nel nostro menu:
- Chi siamo
- Servizi
- Progetti
- Contatti
Per il momento non ci preoccupiamo di inserire del contenuto all'interno di queste nuove pagine, lo faremo più avanti nel dettaglio. Focalizziamoci sul menu di navigazione e raggiungiamo la voce "Aspetto > Menu".
In quest'area saranno presenti tutte le pagine, selezioniamole e aggiungiamole al menu.
Successivamente clicchiamo sulla voce "Crea menu" presente in basso a destra.
Fatto ciò attiviamo la spunta "Primary Menu" per definire la posizione di visualizzazione ed infine salviamo.
A questo punto raggiungendo il front-end del sito Web e ricaricando la home visualizzeremo il nostro menu.
Personalizzare il menu
Ora è giunto il momento di personalizzare il menu a piacimento. Apriamo il file style.css e definiamo lo stile del nostro menu di navigazione.
nav .menu-menu-1-container{
margin: 0 auto;
}
nav ul{
padding: 0px;
}
nav li{
display: inline-block;
margin: 0px 10px;
}
nav li a{
color: #fff;
text-decoration: none;
font-size: 21px;
text-transform: uppercase;
}
nav li.current-menu-item a, nav li a:hover{
text-decoration: underline;
}Aggiorniamo inoltre il tag nav come segue:
nav{
width: 80%;
height: 80px;
background-color: #0d90c6;
float: left;
display: flex;
align-items: center;
}
Arrivati a questo punto abbiamo creato il menu in versione Desktop, dobbiamo però considerare che questo dovrà essere visto attraverso tutti i dispositivi mobili, tra i quali anche smartphone e tablet.
Cosa è un menu responsive?
Un menu di navigazione responsive è progettato per adattarsi e funzionare in modo efficace su diversi device e dimensioni dello schermo, come PC, tablet e smartphone. L'obiettivo principale di un menu di navigazione responsive è garantire una buona esperienza utente su tutte le piattaforme, consentendo agli utenti di accedere facilmente ai contenuti del sito Web indipendentemente dalla dimensione del loro schermo.
Per proseguire con la creazione della nostra Navbar di tipo responsive sfruttiamo un plugin di WordPress chiamato Max Mega Menu. Quindi andiamo all'interno della sezione dedicata ai plugin, lo cerchiamo ed ovviamente lo installiamo.
A questo punto sarà comparso all'interno della sidebar la voce dedicata al nuovo plugin. Procediamo con l'attivazione e apriamo le impostazioni del nuovo plugin.
Per prima cosa assegniamo alla voce "Menu Location Settings" la posizione di "Primary Menu".
All'interno della seconda tab chiamata "Menu Themes" è possibile personalizzare l'aspetto estetico del menu assegnando colori, ombre ed effetti per rendere il menu di navigazione personalizzato.
Lascio a te la libertà di personalizzarlo a piacimento e una volta stabilito l'aspetto desiderato non dovrai far altro che salvare le modifiche effettuate e visualizzare il risultato lato front-end semplicemente ricaricando la pagina.
Sempre all'interno di "Menu Themes" è possibile effettuare delle personalizzazioni tramite CSS inserendo il codice all'interno della tab chiamata "Custom Styling". Per comodità, avendo creato un tema personalizzato nelle precedenti lezioni, potremo inserire il nostro codice direttamente all'interno del file style.css del main folder.
Altra funzione molto comoda e utile del plugin Max Mega Menu è la possibilità di personalizzare il menu anche per quanto riguarda la versione mobile mediante la "Tab Mobile Menu".
All'interno della prima impostazione è possibile stabilire a quale dimensione di schermo si attiverà la versione mobile.
È possibile inoltre definire la posizione dell'icona di apertura (Hamburger) del menu, il colore, l'altezza ed altre impostazioni.
Avremo modo di impostare lo stile nella prossima lezione in modo da rendere il nostro sito Web moderno ed esteticamente accattivante. Per ora, l'ultima funzione relativa al menu che analizzeremo è la gestione dei sottomenu e delle sottovoci.
Se andiamo infatti all'interno di "Aspetto > Menu" della Dashboard di WordPress e spostiamo alcune delle voci sotto le altre, si abiliterà in automatico il sottomenu.
Grazie a Max Mega Menu sarà possibile visualizzare il funzionamento di questa impostazione in maniera automatica.
Insomma, grazie a WordPress è possibile facilitare la creazione e lo sviluppo dei nostri progetti ed all'occorrenza è possibile integrare HTML e CSS per continuare la personalizzazione. Nella prossima lezione lavoreremo sull'aspetto estetico del sito e vedremo come riempire gli spazi vuoti ottenendo un risultato finale sempre più professionale.