I menu a fisarmonica sono quelli i cui elementi sono disposti, solitamente, verticalmente e le cui opzioni corrispondenti si espandono e diventano visibili quando si seleziona l'elemento padre.
Sono particolarmente utili per le barre laterali, sebbene l'effetto a volte non sia ottimale per alcuni design. Pertanto, è necessario valutare se utilizzarli o meno, tenendo presente che il menu compresso occupa ovviamente meno spazio rispetto a quando è espanso e, pertanto, quando le opzioni secondarie diventano visibili, tutti gli elementi (altri gadget, ad esempio) che si trovano al di sotto di esso si sposteranno verso il basso tanto quanto il menu si espande.
Detto questo, quello che vedremo è uno schema di base su come costruirli senza bisogno di JavaScript (abbiamo già visto come farlo ), in modo che reagiscano sia quando il puntatore viene passato sopra ( hover ) sia quando viene cliccato.
Menu a discesa con passaggio del mouse
Il markup HTML sarà quello consueto per una lista, usando ul per delimitare la lista stessa e li per ciascuno dei suoi elementi. Per le diverse opzioni per ogni elemento della lista, annideremo semplicemente una nuova lista all'interno di ciascuna.
È sufficiente marcare la lista principale con una classe specifica, e il CSS farà il resto. Nell'esempio seguente, useremo acorh .
<ul class=" acorh ">
<li><a href="#">OPZIONE 1</a>
<ul>
<li> <a href=" URL11" > Opzione 1.1</a></li>
<li> <a href=" URL12" > Opzione 1.2</a></li>
</ul>
</li>
<li><a href="#">OPZIONE 2</a>
<ul>
<li> <a href=" URL21" > Opzione 2.1</a></li>
<li> <a href=" URL22" > Opzione 2.2</a></li>
<li> <a href=" URL23" > Opzione 2.3</a></li>
</ul>
</li>
<li><a href="#">OPZIONE 3</a>
<ul>
<li> <a href=" URL31" > Opzione 3.1</a></li>
<li> <a href=" URL32" > Opzione 3.2</a></li>
</ul>
</li>
</ul>
(*) Dovrai modificare l' URLXX che ho aggiunto con un colore diverso per gli indirizzi di destinazione di ciascun link nel menu.
Una volta ottenuta una struttura HTML come questa, non ti resta che aggiungere il seguente codice CSS per far funzionare il menu in stile fisarmonica:
ul.acorh,
ul.acorh * {
margine: 0;
spaziatura interna: 0;
bordo: 0;
}
ul.acorh {
margine: 10px auto;
spaziatura interna: 0;
stile elenco: none;
larghezza: 100%;
dimensione carattere: 18px;
}
ul.acorh li {
stile elenco: none;
}
ul.acorh li a {
display: blocco;
spaziatura interna: 10px 10px 10px 20px;
sfondo: #333;
colore: #eee;
bordo inferiore: 1px solido #000;
bordo superiore: 1px solido #666;
decorazione testo: none;
dimensionamento box: border-box;
}
ul.acorh li ul {
altezza massima: 0;
margine: 0;
spaziatura interna: 0;
stile elenco: none;
overflow: nascosto;
transizione: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}
Tale che:
Quasi tutto ciò che vedete nel CSS è formattazione del colore e simili, ma c'è qualcosa che voglio evidenziare perché è proprio ciò che rende le sotto-opzioni visibili o invisibili. Questo qualcosa è la
proprietà max-height del selettore corrispondente alle liste nidificate o secondarie ( ul.acorh li ul ), che, come potete vedere, inizialmente ha valore zero. Quindi, per lo stesso selettore, ma una volta che passiamo il mouse sopra il suo li immediatamente superiore (ul.acorh li:hover ul), impostiamo un valore per max-height sufficientemente alto (senza superare il valore) da contenere il numero massimo di sotto-opzioni che utilizziamo per qualsiasi elemento padre entro quell'altezza.
In questo modo, la lista è inizialmente invisibile perché ha altezza zero, e quando passiamo il mouse sopra di essa, si espande fino all'altezza necessaria.
Avremmo potuto usare height allo stesso modo, ma in quel caso la transizione che abbiamo incorporato per rendere la visualizzazione fluida, non brusca, non avrebbe funzionato. Roba da CSS.
Click -through : dispositivi touch
Per far funzionare le cose con un clic, dovremo usare la pseudo-classe :target . Inizialmente, si tratterebbe semplicemente di cambiare il selettore ul.acorh li:hover ul sopra menzionato in ul.acorh li:target ul , ma il CSS è un po' macchinoso e, affinché funzioni come vogliamo, gli elementi "cliccabili" devono avere un ID univoco e i loro link devono puntare a se stessi.
Il risultato è un HTML come questo, dove la differenza con il precedente sta proprio negli ID degli elementi nella lista principale e nel contenuto dei loro link, che invece di essere vuoti (#) hanno un marcatore con lo stesso ID. Ho anche contrassegnato le modifiche che dovrebbero essere apportate a ciò che ho visto con un colore diverso.
<ul class="acorh">
<li id="option1" > <a href=" #option1 "> OPZIONE 1</a>
<ul>
<li><a href="URL11">Opzione 1.1</a></li>
<li><a href="URL12">Opzione 1.2</a></li>
</ul>
</li>
<li id="opzione2 "> <a href=" #opzione2 "> OPZIONE 2</a>
<ul>
<li><a href="URL21">Opzione 2.1</a></li>
<li><a href="URL22">Opzione 2.2</a></li>
<li><a href="URL23">Opzione 2.3</a></li>
</ul>
</li>
<li id="option3 "> <a href=" #option3 "> OPZIONE 3</a>
<ul>
<li><a href="URL31">Opzione 3.1</a></li>
<li><a href="URL32">Opzione 3.2</a></li>
</ul>
</li>
</ul>
(*) Dovrai modificare nuovamente gli URLXX con gli indirizzi di destinazione di ciascuno dei link nel menu.
Una volta fatto questo, il codice CSS sarà esattamente lo stesso che abbiamo visto prima, ad eccezione del selettore ul.acorh li:hover ul , che, come ho detto prima, diventerà ul.acorh li:target ul e apparirà così:
ul.acorh li: target ul {
altezza massima: 300px;
transizione: .3s all ease-in;
}
Clicca sulla demo qui sotto.
Per far sì che l'ultimo elemento visualizzato collassi con un nuovo clic, dovremmo ricorrere a un altro sistema con CSS più complesso e non così generico, all'uso di input oppure utilizzare JavaScript .
Menu a discesa con passaggio del mouse e clic
Questa soluzione è semplice e consigliata anche se vogliamo utilizzare l'hover, ma vogliamo anche che il menu a discesa funzioni sui dispositivi touch.
Per farlo, basta combinare i due selettori considerati alternativi e includerli entrambi nel CSS:
ul.acorh li:hover ul,
ul.acorh li:target ul {
altezza massima: 300px;
transizione: .3s all ease-in;
}
Commenti
Posta un commento