Menu a livelli multipli con liste annidate - Versione stampabile
Stertix
Menu a livelli multipli con liste annidate - Versione stampabile

+- Stertix (https://www.stertix.it)
+-- Forum: Webmaster World (/Forum-Webmaster-World)
+--- Forum: Forum Board (/Forum-Forum-Board)
+---- Forum: MyBB (/Forum-MyBB)
+---- Discussione: Menu a livelli multipli con liste annidate (/Thread-Menu-a-livelli-multipli-con-liste-annidate)



Menu a livelli multipli con liste annidate - Matty039 - 16/03/2014 20:59

Chiariamolo subito: non ha alla base tecniche rivoluzionarie o mai viste. Il valore aggiunto consiste nel fatto che l’autore ha concepito e strutturato il suo lavoro come una specie di mini-framework, se così si può dire, una solida base di partenza da riusare con facilità ogni qual volta si intenda adoperare questo tipo di soluzione. Verificherete che con piccolissimi interventi di personalizzazione e strutturando il markup nel modo corretto potrete ottenere in pochissimo un menu perfettamente funzionante su tutti i principali browser. L’unica accortezza, come in tutti i framework, consiste nell’uso di specifiche classi nel markup.

Figura 1 – Menu a livelli multipli

[Immagine: menumulti.png]

Per iniziare, ecco subito una demo con il menu decontestualizzato da un layout. Il documento, che potete scaricare in allegato insieme agli altri esempi, contiene tutto il codice HTML e CSS che ci serve, opportunamente commentato nei punti salienti.

Il CSS
Partiamo nella nostra analisi proprio dal CSS. Abbiamo suddiviso il codice per comodità in due sezioni.

La struttura del menu

La prima sezione è relativa alla struttura del menu. Contiene le regole che gestiscono il layout, il posizionamento degli elementi nei vari stati, etc. Importante: questa sezione va lasciata intatta, non c’è alcun motivo per modificarla. Eccola nella sua interezza:

Citazione:/* Struttura menu */

.nav
{
list-style:none;
margin:0;
padding: 0;
}

.nav > li,
.nav > li > a
{
display:inline-block;
*display:inline; /* Per IE7 */
zoom:1; /* Per IE 7 */
}

.stacked > li
{
display:list-item;
}

.stacked > li > a
{
display:block;
}

.flyout,
.flyout-alt
{
position:relative;
}

.flyout-content
{
position:absolute;
top:100%;
Citazione:/* Posizioniamo i sottomenu fuori dallo
schermo; alternativa a display:none
*/
left:-99999px;

height:0;
overflow:hidden;
}

.flyout:hover > .flyout-content
{
left:0;
}

.flyout-alt:hover > .flyout-content
{
top:0;
left:100%;
}

.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content
{
height:auto;
overflow:visible;
}

/* Fine struttura menu */
Evidenziamo solo alcuni punti.

La lista di base (con classe .nav) va resettata impostando list-style:none e azzerando margini e padding.
Il menu di base viene strutturato in orizzontale non con i float, ma usando display: inline-block (si veda l’articolo Una griglia di immagini senza float e tabelle); la regola comprende anche gli hack per estendere la compatibilità a IE7.
Gli elementi con classe .flyout-content, ovvero i sottomenu, vengono posizionati assolutamente e inizialmente nascosti posizionandoli fuori dallo schermo, la nota tecnica alternativa a display: none.
Questi stessi sottomenu vengono riposizionati nel punto giusto solo all’hover sugli elementi che li attivano.
L’aspetto del menu

La seconda sezione riguarda l’aspetto del menu, i suoi connotati visuali: colore del testo, colore di sfondo, bordi e qualunque altro effetto visivo si voglia applicare (nella demo ci siamo mantenuti sul semplice).

Questa parte contiene regole che ovviamente potranno essere modificate per adeguare il menu al look and feel del proprio sito. Ecco come si presenta nella demo:

Citazione:/* Aspetto menu */

.site-nav a
{
line-height:1;
padding:1em;
background-color:#f58529; /* Colore di sfondo iniziale */
color:#fff; /* Colore del testo dei link */
font-weight: bold;
white-space:nowrap;
}

.site-nav .flyout:hover > a,
.site-nav .flyout-alt:hover > a,
.site-nav a:hover
{
background-color: #ba0202; /* Colore di sfondo sull'hover */
}

.site-nav .flyout-alt > a:after
{
content:" »";
} /* Inseriamo l'indicatore di presenza del sottomenu */

.site-nav a,
.site-nav .flyout-content
{
/* Colore e stile dei bordi;
azzeriamo lo spessore con 0px
*/
border: 0px solid #000;
}

.site-nav > li > a
{
/* Bordo sinistro sulle voci del menu principale */
border-left-width:1px;
}

.site-nav > li:first-child > a
{
/* Eliminiamo il bordo dalla prima voce del menu */
border:none;
}

.site-nav .flyout-content
{
/* Bordo superiore per il sottomenu */
border-width:1px 0 0 0;
}

.site-nav .flyout-content a
{
/* Bordo inferiore per le singole voci del sottomenu */
border-bottom-width:1px;
}

.site-nav .flyout-alt:hover > .flyout-content
{
/* Un piccolo aggiustamento per la posizione del
sottomenu sull'hover
*/
top:-1px;
}

/* Fine aspetto menu */
I commenti al codice parlano da sé, per cui non ci soffermiamo ulteriormente. Un’unica osservazione va fatta a proposito di questa riga:

Citazione:.site-nav .flyout-alt > a:after {content:" »";}
Figura 2 – Dettaglio del menu

[Immagine: sottomenu.png]

Le voci di menu che sull’hover attivano un sottomenu annidato, sono contrassegnate dal carattere », una chiara indicazione all’utente. » viene inserito come contenuto generato e nulla vieta di poterlo sostituire con altro usando la stessa tecnica, si tratti di altri simboli o caratteri speciali o di piccole icone/immagini. Ricordiamo che il contenuto generato non è però supportato su IE7.

Fonte:Html.it


RE: Menu a livelli multipli con liste annidate - Giuppi - 16/03/2014 22:08

Bravo per aver postato.


RE: Menu a livelli multipli con liste annidate - Anto88 - 06/01/2018 16:04

Grazie