Fisarmonica: Cos'è quello?
Fisarmonica, come tutti sappiamo è un antico strumento musicale usato per suonare musica popolare in alcuni paesi come l'Italia, Germania…
Va bene, stavo scherzando, Mi piace giocare. Ripartiamo.
Sappiamo tutti cos'è una fisarmonica: un fantastico, modo comodo per visualizzare molte opzioni (Generalmente, voci del menu) nelle nostre pagine html senza ingombrarle.
Ecco cosa Wikimedia dice:
Il elemento di controllo grafico fisarmonica è un elenco di elementi impilati verticalmente, come etichette o miniature. Ogni articolo può essere “allargato” o “allungato” per rivelare il contenuto associato a quell'elemento. Possono esserci zero elementi espansi, esattamente uno, o più elementi espansi alla volta, a seconda della configurazione.
Il termine deriva dalla fisarmonica musicale in cui le sezioni del mantice possono essere espanse tirando verso l'esterno.
Un menu a fisarmonica ci permette di organizzare le nostre voci di menu in categorie e sottocategorie senza alcun limite, mettere decimi di link in uno spazio molto piccolo.
Di cosa stai parlando?
Va bene, ti sento dire, ma perché ci stai dicendo tutto questo?? Lo sappiamo già…
Bene, So che lo sai e dovresti saperlo, lo so che lo sai. Il fatto è che molte persone , quando si tratta di creare un menu a fisarmonica, iniziare a cercare un plug-in jQuery: ce ne sono un sacco in giro ma quello che voglio mostrarti è che non hai bisogno di alcun plugin per creare un, menu Fisarmonica infinitamente estensibile: appena 11 righe di jQuery (parentesi inclusa)!
Lasciate che vi mostri un esempio funzionante del menu a fisarmonica che costruiremo insieme:
Esempio di fisarmonica
[frammento di incorporamento=”mg-fisarmonica”]
Il menu a fisarmonica più semplice di sempre!
Cominciamo con la nostra fisarmonica. Avrà un paio di fantastiche funzionalità:
- può essere esteso di cui abbiamo bisogno senza modificare il codice jQuery sottostante: possiamo aggiungere un numero infinito di sottomenu ed elementi semplicemente usando un paio di classi css;
- Ogni volta che cliccheremo su una voce di menu per mostrare i suoi figli vogliamo chiudere automaticamente qualsiasi altro menu aperto indipendentemente dal suo livello (tranne ovviamente quello in cui ci troviamo).
Il markup di base
Così, guarda il seguente markup per il nostro menu. Useremo l'elemento nav per avvolgere la serie di elenchi non ordinati che costruiranno menu e sottomenu. Diamo alla lista principale l'id “mg-fisarmonica” (sai, Mg resta per Marco Gasi 😉 ) Poi useremo class “cadere in picchiata” per segnare tutto in elementi che contengono un sottomenu e la classe “sottomenu” per segnare il il elemento che rappresenta il sottomenu tenuto dalla voce dell'elenco a discesa. Nel seguente frammento puoi vedere evidenziate tutte le righe in cui vengono utilizzate queste classi:
<non sono>
<ul id ="mg-fisarmonica" role ="navigazione" class ="riga">
<in><a href ="#" titolo="">Tutte le ricette italiane</un'></in>
<Li = classe"cadere in picchiata"><a href ="#" titolo="">Primi piatti</un'>
<ul class ="sottomenu">
<in><a href ="#">Tutti i primi piatti</un'></in>
<in><a href ="#">Tutte le ricette di pasta</un'></in>
<in><a href ="#">Tutte le ricette di riso</un'></in>
<Li = classe"cadere in picchiata"><a href ="#"> Pasta</un'>
<ul class ="sottomenu">
<in><a href ="#">Carbonara</un'></in>
<in><a href ="#">Amatriciana</un'></in>
<in><a href ="#">Al pesto</un'></in>
<in><a href ="#">Pomodoro e basilico</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Riso</un'>
<ul class ="sottomenu">
<in><a href ="#">Milanese</un'></in>
<in><a href ="#">Con funghi</un'></in>
<in><a href ="#">Con piselli</un'></in>
<in><a href ="#">Con frutti di mare</un'></in>
</il>
</in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">bistecca</un'>
<ul class ="sottomenu">
<in><a href ="#">Bistecche alla Stroganoff</un'></in>
<in><a href ="#">Bistecca & patatine fritte</un'></in>
<in><a href ="#">Bistecca al vino rosso</un'></in>
<in><a href ="#"> Bistecche al burro di rafano</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Pesci</un'>
<ul class ="sottomenu">
<in><a href ="#">Nasello affumicato, fagioli & verdi</un'></in>
<in><a href ="#">Salmone al miso alla griglia con spaghetti di riso</un'></in>
<in><a href ="#">Curry di pesce al cocco</un'></in>
<in><a href ="#">Tagine di mare</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Frutta</un'>
<ul class ="sottomenu">
<in><a href ="#">Albicocche Sciroppate Al Rosmarino</un'></in>
<in><a href ="#">Amarene cannella</un'></in>
<in><a href ="#">Ananas caramellato con crema</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
</il>
</in>
</il>
</non sono>
Tieni a mente puoi aggiungere tutti i sottomenu di cui hai bisogno senza modificare una sola virgola del codice jquery.
Vai con jQuery
Quello che vogliamo fare è convertire questo semplice elenco in un menu Accordion completamente funzionante.
Vogliamo tre cose:
- facendo clic su un elemento si aprirà il suo sottomenu e facendo nuovamente clic su tale elemento si nasconderà il sottomenu
- facendo clic su un elemento si nasconderanno tutti i sottomenu visibili prima di mostrare il sottomenu figlio dell'elemento cliccato
- questo meccanismo deve funzionare rispettando qualsiasi livello di sottomenu annidati (nell'esempio sopra ne abbiamo tre)
Andiamo a jQuery. Primo, dobbiamo incorporare jQuery:
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></copione>
Il documento è pronto??
$(documento).pronto(funzione (){
Ora dobbiamo allegare un gestore di eventi a tutti gli elementi di ancoraggio per gli elementi della lista che hanno un sottomenu. Lo facciamo in due passaggi solo per renderlo un po' più chiaro:
// first we get our accordion menu and we put it in the variable mymenu var mymenu = $('ul#mg-fisarmonica'); // quindi creiamo la variabile a discesa che contiene tutte le ancore figlie degli elementi dell'elenco di classe // menu a discesa. Queste ancore sono quelle a cui dobbiamo collegare il gestore di eventi: facendo clic su di essi sarà come // the hidden submenu var dropdowns = $(miomenu.trova('li.dropdown > un'));
E ora il codice della fisarmonica:
dropdowns.on('clic', funzione (e) {
//prevent default behavior
e.preventDefault();
// stiamo facendo clic su un'ancora all'interno di un elemento dell'elenco
// quindi troviamo tutti gli elementi ul.submenu che sono
// figli di qualsiasi elemento dell'elenco che rimane al
// same level of its parent
var items = $(Questo).genitori().fratelli().trova('ul.sottomenu');
// for each found ul element we do the following
items.each(funzione () {
Se ($(Questo).è(':visibile')) {
$(Questo).scorrere verso l'alto('Lento');
}
});
// mostra e nascondi elenchi
$(Questo).fratelli('ul.sottomenu').slideToggle();
});
Se vuoi consentire che più di un sottomenu sia visibile contemporaneamente, puoi semplicemente eliminare alcune righe di codice:
var miomenu = $('ul#mg-fisarmonica');
var dropdown = $(miomenu.trova('li.dropdown > un'));
dropdowns.on('clic', funzione (e) {
e.preventDefault();
$(Questo).fratelli('ul.sottomenu').slideToggle();
});
Mettere tutto insieme!
È tutto. Puoi modellarlo come preferisci e non hai limiti se non la tua fantasia! ?
Mettendo tutto insieme otteniamo il seguente codice: questo è esattamente lo stesso codice che puoi vedere in esecuzione sopra nel mio piccolo esempio di menu a fisarmonica.
Come potete vedere, Ho aggiunto del codice per mettere a + (più) e – (meno) segni vicino per aprire e chiudere il sottomenu e modificarli in base alle scelte dell'utente. Vedere i commenti nel codice per saperne di più su questo.
<!DOCTYPE html>
<html lang="in">
<testa>
<meta set di caratteri="UTF-8">
<meta http-equiv ="Compatibile con X-UA" = contenuto"IE=bordo">
<meta name ="Finestra" = contenuto"larghezza = device-width, iniziale scala = 1">
<titolo>Prova di fisarmonica</titolo>
<stile>
il{
list-style-type: nessuna;
}
li.dropdown > il{
Schermo: nessuna;
}
</stile>
</testa>
<corpo>
<div class ="contenitore">
<div class ="riga">
<div class ="col-12 ·">
<classe di navigazione="mio-menu">
<ul id ="mg-fisarmonica"class ="riga">
<in><a href ="#" titolo="">Tutte le ricette italiane</un'></in>
<Li = classe"cadere in picchiata"><a href ="#" titolo="">Primi piatti</un'>
<ul class ="sottomenu">
<in><a href ="#">Tutti i primi piatti</un'></in>
<in><a href ="#">Tutte le ricette di pasta</un'></in>
<in><a href ="#">Tutte le ricette di riso</un'></in>
<Li = classe"cadere in picchiata"><a href ="#"> Pasta</un'>
<ul class ="sottomenu">
<in><a href ="#">Carbonara</un'></in>
<in><a href ="#">Amatriciana</un'></in>
<in><a href ="#">Al pesto</un'></in>
<in><a href ="#">Pomodoro e basilico</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Riso</un'>
<ul class ="sottomenu">
<in><a href ="#">Milanese</un'></in>
<in><a href ="#">Con funghi</un'></in>
<in><a href ="#">Con piselli</un'></in>
<in><a href ="#">Con frutti di mare</un'></in>
</il>
</in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">bistecca</un'>
<ul class ="sottomenu">
<in><a href ="#">Bistecche alla Stroganoff</un'></in>
<in><a href ="#">Bistecca & patatine fritte</un'></in>
<in><a href ="#">Bistecca al vino rosso</un'></in>
<in><a href ="#"> Bistecche al burro di rafano</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Pesci</un'>
<ul class ="sottomenu">
<in><a href ="#">Nasello affumicato, fagioli & verdi</un'></in>
<in><a href ="#">Salmone al miso alla griglia con spaghetti di riso</un'></in>
<in><a href ="#">Curry di pesce al cocco</un'></in>
<in><a href ="#">Tagine di mare</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Frutta</un'>
<ul class ="sottomenu">
<in><a href ="fisarmonica.php">Albicocche Sciroppate Al Rosmarino</un'></in>
<in><a href ="#">Amarene cannella</un'></in>
<in><a href ="#">Ananas caramellato con crema</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
</il>
</in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
</il>
</in>
<Li = classe"cadere in picchiata"><a href ="#">Dolci</un'>
<ul class ="sottomenu">
<in><a href ="#">Budino di cioccolato</un'></in>
<in><a href ="#">Torta di castagne toscana</un'></in>
<in><a href ="#">Crostata di nocciole con marmellata di fichi</un'></in>
</il>
</in>
</il>
</in>
</il>
</in>
</il>
</in>
</il>
</non sono>
</Div>
</Div>
</Div>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></copione>
<script type ="text / javascript">
$(documento).pronto(funzione () {
var miomenu = $('ul#mg-fisarmonica');
var dropdown = $(miomenu.trova('li.dropdown > un'));
menu a discesa.ciascuno(funzione () {
$(Questo).anteporre('+');//aggiungiamo a + (più) simbolo per evidenziare il fatto che il nodo contiene un sottomenu
});
dropdowns.on('clic', funzione (e) {
e.preventDefault();
//A seguire 5 lines change the plus/minus symbols accordingly to the submenu state
if ($(Questo).testo().charAt(0) === '+') {
$(Questo).testo($(Questo).testo().sostituire('+', '-'));
} altro {
$(Questo).testo($(Questo).testo().sostituire('-', '+'));
}
var elementi = $(Questo).genitori().fratelli().trova('ul.sottomenu');
articoli.ciascuno(funzione () {
Se ($(Questo).è(':visibile')) {
$(Questo).scorrere verso l'alto('Lento');
//aggiorniamo il simbolo più/meno in tutti i sottomenu fratelli
$(Questo).fratelli('.menu a discesa un').testo($(Questo).fratelli('.menu a discesa un').testo().sostituire('-', '+'));
}
});
$(Questo).fratelli('ul.sottomenu').slideToggle();
});
});
</copione>
</corpo>
</.html>
Puoi vedere il codice sopra in azione Qui.
È tutto, persone. Spero che questo aiuti 🙂
Ciao, Fantastico, ma sembra non funzionare come previsto. I bambini sono sempre visualizzati e il menu + si trasforma in un – quando è chiuso e solo allora nasconde i bambini.
Ciao AJ.
È strano! Giusto per essere sicuro ho appena copiato e incollato il codice pubblicato creando un esempio e funziona come previsto. Ho aggiunto un link a questo esempio alla fine dell'articolo, ma puoi semplicemente navigare su https://codingfix.com/examples/mgaccordion-example.html e vedrai che il codice funziona.
E anche se ammetto che non è molto coerente con quello che dico nel mio post, Ho quindi trasformato il codice in un plugin che puoi trovare Qui 😀
Fatemi sapere se avete qualche problema 🙂 e grazie per aver letto il mio blog!