Come studiato nell'articolo dedicato alle pagine di raccordo, alla loro importanza nell'organizzazione del sito internet, un ruolo fondamentale lo gioca il menu. Il menu permette di avere sempre a "portata di clic" tutte le pagine principali del sito internet o proprio tutte le pagine del sito, in caso esso sia composto di poche pagine: esempio i siti internet di rappresentanza.
Grazie ad alcuni software appositamente studiati per la generazione di menu, è possibile inserire in maniera automatica il menu in tutte le pagine.
Scarica da:Amazon (Kindle) | Google Play Libri | Kobo | Apple Books | Ibs | MondadoriStore | laFeltrinelli
Menu verticale e orizzontale: quale preferire
Classicamente i menu si dividono in orizzontali e verticali. Per lungo tempo i siti internet hanno usato prevalentemente menu verticali posti generalmente a sinistra oppure a destra. Mentre oggi si impongono quelli orizzontali, ma non sempre: vediamo perché.
Le 'barre menu'
Ancora oggi svariati tipi di e-shop hanno la barra verticale. Utilissima in questo caso per accogliere il voluminoso catalogo di articoli, diviso in numerose pagine di raccordo.
I siti internet più complessi presentano un mix di menu verticali e orizzontali: menu orizzontale in testa e ai piedi del sito, menu verticale a sinistra, in alternativa a destra.
Menu verticali doppi, cioè a sinistra e a destra, appartengono alla storia del web: troverete ancora qualche rarità. Questa soluzione disorienta molto: dove deve guardare l'utente per trovare i contenuti sul sito? A destra o a sinistra? Finirà per cercarli da un'altra parte.
Il menu orizzontale negli ultimi anni è diventato il più usato. Di maggiore impatto: l'utente lo vede subito al centro della pagina in alto. Idoneo per i dispositivi mobile: tablet, smartphone.
Menu responsive
Il menu responsive ha la capacità di adattarsi alle dimensioni del dispositivo. Così come tutto il sito internet, anche il menu responsive, è alla base di un odierno buon sito web.
Applicativi per creare un menu
Nel web esistono centinaia di soluzioni. Troverai applicativi incorporati in siti internet, appositamente realizzati per consentirti di creare online il tuo menu. Troverai numerosi software gratuiti da scaricare.
Tra i software scaricabili troviamo CSS3 Menu. Usato per creare il semplice menu di questo sito web. Facile da usare, grazie all'interfaccia composta di pochi comandi a icona. Il software è in lingua italiana. Altra caratteristica positiva, il software genera il menu usando un solo foglio di stile. Questa caratteristica rende il menu leggero e veloce da caricare: un pensiero alle connessioni lente ed ai piani tariffari a consumo.
Creato il menu, basterà cliccare sul tasto "pubblica" per ottenere un file html e una cartella contenente il foglio di stile .css con le immagini del menu.
CSS3 Menu realizza menu orizzontali e verticali. I menu orizzontali possono essere creati responsive, spuntando l'apposita casellina in basso a destra prevista nella schermata dell'applicazione.
Menu a icona
Accanto ai classici menu testuali, possiamo creare menu di testo + icona, menu composti di sole icone. Un menu a icone può essere utile da inserire in sezioni speciali del sito. Oppure viene progettato come una "cassetta degli strumenti" contenente vari attrezzi, ed entra a far parte delle singole pagine di contenuto.
Descrivo un esempio per chiarire quest'ultimo passaggio. Voglio progettare un menu a icona con la "casetta" per indicare all'utente che da qui può tornare alla home page. Aggiungo l'icona con la "stampante" per consentire la stampa della pagina web. Aggiungo l'icona con la "busta delle lettere" collegata al mio indirizzo di posta elettronica, per essere contattato. Aggiungo in fondo al menu l'icona con il "punto interrogativo" collegata alla pagina delle domande e risposte circa la navigabilità del sito o della speciale sezione.
I menu a icona sono utili per aggiungere un collegamento alle pagine dei social network, attraverso i simboli ufficiali di questi ultimi.
Nel prossimo articolo vedremo come creare un menu con CSS3 Menu, passo dopo passo.
