Menu a livelli multipli con liste annidate
Si prega di disabilitare gli script di anti adblock per visualizzare questa pagina
NAV
Ciao, ospite! Accedi o Registrati su Stertix.it
LoginRegistrati
Registrati adesso è GRATUITO

Appena entrato avrai:
Norton Safe Web Connessione HTTPS Sicura

Registrati Adesso!

Pubblicità


Tag: Menu, livelli, multipli, liste, annidate,
Nuova Discussione
Rispondi alla Discussione
 
Valutazione discussione:
  • 1 voti - 5 media
  • 1
  • 2
  • 3
  • 4
  • 5
Menu a livelli multipli con liste annidate
772 Visite
Nuovo Utente
5.00C
2013 Aug
3
8
Nuovo Utente

Messaggio: #1
Menu a livelli multipli con liste annidate
16/03/2014 20:59

Aggiorna il tuo account per nascondere gli annunci pubblicitari.

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

Rispondi


(Questo messaggio è stato modificato l'ultima volta il: 16/03/2014 21:07 da Matty039.)
Utente Genio
****
5.00C
2013 Dec
29
243
Utente Genio

Messaggio: #2
Menu a livelli multipli con liste annidate
16/03/2014 22:08


Bravo per aver postato.

Rispondi


Utente Normale
*
5.00C
2018 Jan
0
30
Utente Normale

Messaggio: #3
Menu a livelli multipli con liste annidate
06/01/2018 16:04


Grazie

Rispondi


Aggiorna il tuo account per nascondere gli annunci pubblicitari.



Facebook Twitter Linkedin MySpace Technorati Digg

Utente(i) che stanno guardando questa discussione: 1 Ospite(i)



Discussioni correlate...
Discussione: Autore Risposte: Letto: Ultimo messaggio
  Guida Menu a tendina sul nickname postbit style vbulletin per mybb Stertix 2 2,852 16/03/2018 22:44
Ultimo messaggio: zCarPixel_
Thumbs Up Guida [Per 1.8] [Tutorial] Menu di navigazione a discesa semplice responsive per MyBB Stertix 0 941 28/01/2018 17:45
Ultimo messaggio: Stertix



contatore