Come realizzare un menu a discesa orizzontale con il CSS

In informatica viene chiamato CSS (sigla di ?Cascading Style Sheets?, in italiano ?fogli di stile a cascata?) il linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, ad esempio i siti web e le relative pagine web. Tramite questo linguaggio informatico è possibile realizzare nella vostra pagina web un menu a discesa orizzontale, per permettere agli utenti una facile interazione con i vostri contenuti. Il procedimento per fare questo è abbastanza facile e in questa guida vi illustreremo come fare.

• Conoscenza del codice "html"
• Conoscenza del codice "CSS"

Per prima cosa, al fine di poter programmare in CSS, dovremo accedere al codice HTML (HyperText Markup Language, cioè, in italiano, "Linguaggio a Marcatori per Ipertesti") del sito/pagina web che vogliamo modificare. Per fare questo dovremo andare sulla barra degli strumenti del nostro browser, cliccare su "Visualizza" e poi cliccare, fra le opzioni proposte, su "Origine". In alternativa possiamo cliccare col tasto destro al centro della schermata e selezionare "visualizza sorgente pagina".

Una volta visualizzato il codice HTML si tratta di passare a modificarlo. Per fare questo non è sufficiente l'operazione sopra descritta ma sono necessari alcuni strumenti informatici che sono a disposizione gratuita di chiunque voglia cimentarsi (vedi fra i link al termine di questo articolo per maggiori dettagli). Sostanzialmente questi strumenti danno la possibilità di digitare all'interno del codice sorgente della pagina, al fine di apportare le modifiche desiderate.

Passiamo adesso all'inserimento vero e proprio del nostro menu, mediante l'uso del codice CSS, Cascading Style Sheets (ovvero foglio di stile). Andremo ad computare le operazioni che descriviamo sinteticamente: inserire, nel "CSS", il codice html "#menu, #menu ul{ list-style: none ;}" (per eliminare il punto agli elenchi puntati) e "#menu ul{ display: none ; position: absolute;}" (per rendere invisibili i sottomenù); introdurre, sempre nel "CSS", la regola "#menu li: hover ul{ display: block;}" (con quest'ultimo comando si ottiene l'effetto di rendere visibile le sole voci del menu, mentre quelle dei sotto-menu appariranno solamente al passaggio del mouse sulla voce principale).

Per aggiustare l'allineamento degli elementi del menu in caso di problemi relativi al disallineamento (questo tipo di problemi si presentano frequentemente, poiché l'eliminazione della visualizzazione del punto degli elenchi puntati determina un allineamento non corretto del menu che abbiamo realizzato), nel foglio di stile, sarete obbligati ad inserire le regole "#menu li{ float: left; position: relative; width:120px;}" e "#menù ul li{ float: none;}": esse vi serviranno appunto per allineare a sinistra solamente le voci del menù principale.

A questo punto siete riusciti a realizzare il vostro desiderato menu a discesa orizzontale (Drop Dpwn Menu). Ora potete lavorare sul fine tuning, cioè sui piccoli dettagli, utilizzando le impostazioni a vostra disposizione. Potete infatti modificare molti elementi accessori di dettaglio (che, dal punto di vista estetico, possono fare la differenza), quali ad esempio: la tinta, la tipologia di carattere del testo, la dimensione dei box e così via.

• CSS: GUIDA AL LAYOUT DEI MENU DI NAVIGAZIONE
• Come accedere al codice html
• Come modificare il codice html

• Come cambiare un attributo CSS tramite JavaScript