Nell’ultimo lezione abbiamo dato forma alla Home Page del nostro sito inserendo ogni elemento che volevamo fosse presente senza limiti di personalizzazione grazie all’integrazione di HTML e CSS. A questo punto la situazione è la seguente:
In questa lezione ci concentreremo invece sullo sviluppo di Menu di navigazione. È giunto quindi il momento di creare nuove pagine da collegare all’interno della nostra navbar.
Apriamo la dashboard WordPress e raggiungiamo la sezione “Pagine”. Creiamo quindi le seguenti pagine da collegare nel nostro menu:
- Chi siamo
- Servizi
- Progetti
- Contatti
Per il momento non ci occupiamo di inserire contenuti in queste nuove pagine, lo faremo in dettaglio più avanti. Concentriamoci sul menu di navigazione e raggiungiamo la voce “Aspetto > Menu”.
In quest’area ci saranno tutte le pagine, selezioniamole e aggiungiamole al menù.
Clicca poi sulla voce “Crea menu” in basso a destra.
Fatto ciò, attiviamo la casella di controllo “Menu Principale” per definire la posizione di visualizzazione e infine salvare.
A questo punto, raggiungendo il front-end del sito e ricaricando la home page visualizzeremo il nostro menù.
Ora è il momento di personalizzare il menu a tuo piacimento. Apriamo il file style.css e definire 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 anche il tag nav come segue:
nav{
width: 80%;
height: 80px;
background-color: #0d90c6;
float: left;
display: flex;
align-items: center;
}
A questo punto abbiamo creato il menù nella versione Desktop, ma dobbiamo considerare che questo dovrà essere visualizzato attraverso tutti i dispositivi mobili, compresi smartphone e tablet.
Un menu di navigazione reattivo è progettato per adattarsi e funzionare efficacemente su diversi dispositivi e dimensioni di schermo, come PC, tablet e smartphone. L’obiettivo principale di un menu di navigazione responsivo è garantire una buona esperienza utente su tutte le piattaforme, consentendo agli utenti di accedere facilmente ai contenuti del sito Web indipendentemente dalle dimensioni dello schermo.
Per continuare con la creazione della nostra Navbar reattiva utilizziamo un plugin WordPress chiamato Menù Mega Mega. Andiamo quindi nella sezione dedicata ai plugin, cerchiamolo e ovviamente installiamolo.
A questo punto nella barra laterale comparirà la voce dedicata al nuovo plugin. Procediamo con l’attivazione e apriamo le impostazioni del nuovo plugin.
Per prima cosa assegniamo la posizione “Menu Principale” alla voce “Impostazioni Posizione Menu”.
All’interno della seconda scheda denominata “Temi Menu” è possibile personalizzare l’aspetto estetico del menu assegnando colori, ombre ed effetti per rendere personalizzato il menu di navigazione.
Ti lascio la libertà di personalizzarlo come desideri e una volta stabilito l’aspetto desiderato non dovrai fare altro che salvare le modifiche apportate e visualizzare il risultato sul front-end semplicemente ricaricando la pagina.
Sempre all’interno di “Menu Themes” è possibile effettuare personalizzazioni tramite CSS inserendo il codice nel tab denominato “Custom Styling”. Per comodità, avendo creato un tema personalizzato nelle lezioni precedenti, potremo inserire il nostro codice direttamente nel file style.css del cartella principale.
Un’altra funzione molto comoda e utile del plugin Max Mega Menu è la possibilità di personalizzare il menu anche per la versione mobile utilizzando la “Mobile Menu Tab”.
All’interno della prima impostazione è possibile stabilire a quale dimensione dello schermo verrà attivata la versione mobile.
Puoi 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 ai menu che esamineremo è la gestione dei sottomenu e delle sottovoci.
Infatti, se andiamo in “Aspetto > Menu” della dashboard di WordPress e spostiamo alcune voci sotto le altre, il sottomenu verrà automaticamente abilitato.
Grazie a Max Mega Menu sarà possibile vedere come funziona questa impostazione in automatico.
Insomma, grazie a WordPress è possibile facilitare la creazione e lo sviluppo dei nostri progetti e se necessario è 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.