Formazione web: XHTML e CSS2

Menu statico XHTML a due livelli

Per poter creare menu a due livelli, ovvero con sottomenu, bisogna inserire la sottolista all'interno degli elementi della lista principale.

Il codice XHTML corretto è il seguente:

Uno dei problemi nei quali è possibile incappare nella gestione dei sottomenu è la scelta dei selettori per identificare correttamente tutti gli elementi della lista. I selettori da utilizzare dovranno essere i seguenti (ricordate che i nomi dati da me sono indicativi, quindi potete cambiarli tranquillamente):

.menu: indica il menu nella sua interezza
.menu li: indica tutti gli elementi sia della lista principale sia della lista interna
.menu ul: indica solo la sottolista
.menu ul li: indica solo gli elementi della sottolista
.menu a: indica tutti i collegamenti contenuti nel menu, sia della lista principale che della sottolista
.menu ul a: indica i collegamente contenuti nella sottolista

Creando un menu con sottomenu sfruttando solo il codice XHTML e il codice CSS per formattarne il comportamente grafico si incorre in un problema che bisogna considerare. Un menu così creato non è dinamico ma statico, ovvero le voci dei sottomenu saranno sempre visibile, ovvero il sottomenu non comparirà solo quando si passa su una voce in particolare, per cui non sempre è comodo realizzare un menu del genere. Per poter realizzare un menu dinamico bisogna utilizzare il linguaggio di programmazione Javascript che vedremo nella lezione successiva. Per chi volesse invece creare un menu statico il procedimento è quello visto pocanzi, creando delle regole css ad hoc per i vari selettori del menu.

Scarica il sorgente della lezione: menu3.zip.