3.62
Creazione di Menu a Livelli Multipli con Liste Non Ordinate in HTML e CSS:
Le liste, quando personalizzate e strutturate correttamente nel markup, possono essere utilizzate per creare menu perfettamente funzionanti su tutti i principali browser. L’uso di specifiche classi nel markup è fondamentale, come illustrato in questo framework di esempio.
CSS – Struttura del Menu: La prima sezione del CSS gestisce la struttura del menu, compresi il layout e il posizionamento degli elementi nei vari stati. Questa sezione non dovrebbe essere modificata:
/* 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%; 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 */ Questa sezione del CSS gestisce aspetti come la disposizione orizzontale degli elementi principali, la visualizzazione e la posizione dei sottomenu.
CSS – Aspetto del Menu: La seconda sezione del CSS si occupa dell’aspetto del menu, definendo colori, bordi e altri effetti visivi:
/* 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 */ Questa sezione definisce l’aspetto visivo del menu, compresi colori, bordi, e il cambio di stile al passaggio del mouse.
HTML: Il markup HTML è strutturato per incorporare il menu principale e sottomenu:
<ul class="nav site-nav"> <li><a href="#">Lorem</a></li> <li class="flyout"> <a href="#">Ipsum</a> <!-- Flyout --> <ul class="flyout-content nav stacked"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li class="flyout-alt"> <a href="#">Item 3</a> <!-- Flyout --> <ul class="flyout-content nav stacked"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> </ul> </li> </ul> </li> <li><a href="#">Sit</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Amet</a></li> </ul> Il markup include classi come .nav, .site-nav, .flyout, .flyout-alt, .flyout-content, e .stacked per implementare la struttura del menu. La classe .flyout è associata ai sottomenu a discesa, mentre .flyout-alt indica i sottomenu laterali.
Questo sistema è progettato per essere flessibile e può essere esteso per gestire sottomenu di diversi livelli. La struttura e la personalizzazione nel CSS possono essere adattate alle esigenze specifiche del progetto.