fatti trovare dai tuoi clienti
Corso SEO & CSS: #26 Menu di navigazione
Per essere in prima pagina su Google, il tuo sito web deve avere il menù di navigazione fatto con una lista di elementi puntati. Grazie al CSS possiamo conferire ad un elenco puntato le sembianze estetiche di un menù di navigazione animato senza usare immagini ausiliarie né codice Javascript, vediamo come...
« Corso SEO & CSS: #25 Box Model
- come fare menu a tendina HTML con CSS?
- menu orizzontali o menu verticali?
- come cambiare aspetto grafico di un menu di navigazione senza modificare l'HTML?
Menu di Navigazione
Basta Javascript nei menu di navigazione!
Ricordo che nei primi siti internet che facevo oltre venti anni fa, per costruire un "bel" menu di navigazione, per prima cosa aprivo un editor grafico (come ad esempio MS-Paint o per capirci Photoshop) e costruivo i "bottoni" che costituivano i vari link del menù di navigazione principale.
Servivano almeno tre diverse immagini (tipicamente in formato GIF):
- immagine del pulsante a riposo
- immagine del pulsante incassato per simulare il click del mouse
- immagine del pulsante riferito alla pagina corrente
- una ulteriore immagine poteva essere realizzata per evidenziare il pulsante al passaggio del mouse
Naturalmente quando si doveva modificare il testo di un pulsante, bisognava modificare tutte le versioni, dare un nome file diverso per evitare che sistemi di cache lato client tenessero in memoria la vecchia versione...
Poi si doveva "inquinare" l'HTML con applet Java o codice Javascript (i più temerari usavano applicativi Flash) per azionare tutti i movimenti del menu!
Poi bisognava avvisare l'utente con uno specifico HTML che doveva installare un sacco di roba se voleva vedere il sito web come il webmaster aveva progettato!
Avrai capito che era un autentico inferno!
Oltre l'enorme fatica il danno!
I menu di navigazione fatti in quel modo obsoleto, servivano a penalizzare enormemente il posizionamento del tuo sito web sui motori di ricerca!
Vediamo dunque come si devono fare i menu di navigazione per essere:
- facili da realizzare per il webmaster
- facili da modificare
- belli da vedere
- comodi da usare
- che ti portino in prima pagina su Google!
Menu in HTML5 + CSS
Come fare menu di navigazione con HTML e CSS
Per prima cosa il tuo HTML deve essere semplice e lineare. Un buon menu di navigazione deve essere un blocco semantico NAV (come già visto qui: Corso SEO & HTML: #14 Tag Nav).
Come vedi, il menu di navigazione principale è inserito in un Tag Nav, all'interno di un Tag Header e al suo interno vi è un elenco puntato Tag UL con una serie di elementi Tag LI al cui interno vi sono elementi link Tag A.
Questa è la struttura che devi usare nei tuoi menu di navigazione se vuoi essere in prima pagina su Google!
Ti faccio notare che un elemento (HOME) è stato classificato in modo diverso dagli altri, dato che ci troviamo nella pagina HOME, quell'elemento è stato marcato class="current-item"
Ora però vediamo quanto è brutto il menu di navigazione se non usiamo un foglio di stile CSS!
Trattandosi di un elenco puntato, giustamente il browser lo mostra al visitatore con il suo classico aspetto grafico dell'elenco: tutti elementi disposti per righe, con un bel pallino all'inizio di ogni riga (chiamato bullet ) e carattere "di fabbrica" improbabile per un menu di navigazione (Times New Roman).
Quindi cerchiamo di capire come fare per trasformare questo orribile elenco puntato in un bellissimo menu di navigazione!
1. Box Model
Ricordiamoci di impostare il box-model come visto la settimana scorsa:
*, *::before, *::after { margin: 0, padding: 0; box-sizing: border-box; }
2. Tipo di carattere
Per prima cosa cambiamo il carattere, scegliendo ad esempio su Google Font un tipo di carattere adatto: per esempio scelgo Alegreya Sans.
Seguendo le indicazioni riportate sul sito inserisco le seguenti direttive (con copia incolla) nel mio file Style.CSS:
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500;700&display=swap');
e imposto la regola font-family: 'Alegreya Sans', sans-serif; font-weight: 500; a tutti gli elementi a cui voglio assegnare quel tipo di carattere.
3. Dimensione del carattere
Gli elementi del menu Tag LI avranno una dimensione di un certo tipo, ad esempio font-size: 18px; (18 pixel).
In particolare, possiamo mettere in evidenza l'elemento corrente aumentandone lo spessore con font-weight: 700;
4. Eliminare i pallini dalla lista
L'elenco puntato Tag UL, per sua natura è un elemento di tipo blocco, i cui componenti Tag LI vengono preceduti da un pallino detto 'bullet'.
In genere i menu di navigazione non devono avere i bullet, perciò li eliminiamo dalla vista mediante la proprietà list-style: none;
5. Impostare margini, dimensione e allineamento
Immaginiamo di voler creare un menu di navigazione orizzontale: ogni elemento Tag LI deve essere affiancato al successivo e al precedente.
Impostiamo una larghezza complessiva all'intero menu Tag UL per ricoprire l'intera larghezza disponibile (width: 100%).
Decidiamo per ogni elemento Tag LI un margine esterno (margin: 10px;), attraverso il padding impostiamo implicitamente l'altezza dei blocchi (padding: 10px;), impostiamo una larghezza minima (min-width: 150px;), un allineamento del testo centrato (text-align: center;) e li inseriamo tutti sulla stessa linea (display: inline-block;).
6. Eliminare la sottolineatura dai link
Solitamente è brutta la sottolineatura predefinita dei link nei pulsanti dei menu di navigazione.
Perciò usando sui Tag A la proprietà text-decoration: none; eliminiamo la sottolineatura.
7. Bordi e sfondi
Ci si può letterariamente sbizzarrire con la fantasia!
Oggi faccio dei pulsanti con un bordino da 2 pixel di un colore azzurro (border: 2px solid #507EA6;), con il testo dello stesso colore del bordo (color: #507EA6;), con un colore di sfondo celestino (background: #D2E3F2;), che però al passaggio del mouse diventa un po' più scuro (:hover {background: #BADFFF;}), mentre l'elemento corrente lo imposto con uno sfondo arancio (background: #F2E6D3;).
Ecco come si presenta il codice CSS completo:
E questo è il risultato:
come vedi è ancora brutto 😆 ma solo perché non mi sono ancora affidato a un grafico, un professionista dell'estetica, della comunicazione!
Quando creo un sito web, mi affido sempre a un grafico per disegnare il Mockup del portale, e poi usando il codice HTML5+CSS3 trasformo il progetto grafico in un sito web funzionante!
Conclusioni
Hai capito quanto sia potente il linguaggio CSS e come devi costruire i tuoi menu di navigazione per essere in prima pagina su Google.
Nel corso dei prossimi articoli di questo Blog sulla SEO approfondiremo altri importanti aspetti del CSS con particolare attenzione a quelli che potenziano la visibilità del tuo sito web e lo portano più facilmente in prima pagina sui motori di ricerca.
Ti do appuntamento alla prossima settimana, nel frattempo metti un like 👍🏻 se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati!
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.