Share
Abbiamo recentemente pubblicato un fantastico tutorial che ha creato il menu di navigazione verticale di Orman Clark in una flessibile fisarmonica jQuery. In realtà è possibile far funzionare tutto senza nemmeno appoggiarsi a jQuery ed è la possibilità perfetta di giocare con il CSS: selettore di target.
Dimenticheremo jQuery e utilizzeremo invece il CSS :bersaglio pseudo-selettore per ampliare e contrarre il nostro menu di fisarmonica.
Come promemoria, ecco la demo jQuery originale, quindi ecco l'approccio puramente CSS.
Accentsconagua
:bersaglio Pseudo selettoreSicuramente conoscerai gli URL che assomigliano a questo: http://www.w3.org/TR/selectors/#target-pseudo. Termina con un segno # e un id elemento, che viene utilizzato per portare il browser direttamente a quell'elemento. Questo particolare URL è l'esempio perfetto: ti porta alla voce con un ID di # Target-pseudo (sentiti libero di andare a leggere).
Quando viene cucita alla fine di un url, questo ID è noto come identificatore di frammento. Non è solo usato per portare il browser in una posizione sulla pagina, ma può anche essere usato tramite CSS per identificare l'elemento in questione.
In breve; noi usiamo :bersaglio per selezionare e manipolare l'elemento nell'identificatore di frammento.
Iniziamo scaricando i file sorgente originali dal primo tutorial. Lo stile è già fatto per noi, quindi non ha molto senso reinventare la ruota.
Inizia aprendo index.html, sulla linea 10 vedrai che jQuery è referenziato. Non ne avremo bisogno, quindi liberatene.
Menu di navigazione verticale: codice CSS3
Quindi, in fondo al documento, troverai la funzione che abilita e attiva la fisarmonica jQuery. Sbarazzati anche di questo.
Eccellente. Ora abbiamo una base molto più pulita.
Come accennato in precedenza, il :bersaglio il selettore punterà a qualsiasi elemento a cui si fa riferimento nell'identificatore di frammento. Pertanto, dobbiamo assicurarci che i nostri elementi dell'elenco principale abbiano tutti ID univoci e che gli ancoraggi al loro interno abbiano collegamenti corrispondenti:
Ora, quando si fa clic sui collegamenti, verrà visualizzato un identificatore di frammento nell'URL:
Attualmente, dopo aver rimosso tutti i bit e le bob di jQuery, la fisarmonica sarà completamente espansa. Abbiamo bisogno che il suo stato iniziale venga compresso, in modo da poter rivelare ogni sottosezione quando si fa clic sui collegamenti.
Andate al file CSS esistente, aggiungeremo alcune regole in basso:
/ * stili aggiuntivi * / .menu> li> ul altezza: 0; overflow: nascosto;
Stiamo indicando i nostri sottomenu qui; qualsiasi discendente diretto degli elementi della lista .menu. Stiamo dicendo che la loro altezza iniziale è 0, e che qualsiasi overflow è nascosto per impedire che il contenuto possa aprirsi la vista. Ora abbiamo tutto crollato. Ed è così che rimarrà a meno che non facciamo qualcosa al riguardo ...
Vogliamo che ciascun sottomenu si espanda, ma solo quando abbiamo fatto clic sul suo link principale. Usiamo :bersaglio per selezionarli:
.menu> li: target> ul height: auto;
In parole povere, questo dice: "Vedi quel li che è menzionato nell'URL? Bene, cambia l'altezza del ul all'interno di esso in automatico". Una volta che fai clic da qualche altra parte e l'id non compare più nell'URL, il sottomenu viene nuovamente interrotto. Provalo!
Visivamente, ci sono ancora un paio di cose da fare. Lo stato attivo non è più assegnato da jQuery, quindi è necessario accertarsi che i nostri elementi dell'elenco di destinazione siano blu. Questi non esistono più:
.menu> li> a.attivo
.menu> intervallo sp.aattivo
Quindi scambiali per questi:
.menu> li: destinazione> a
.menu> li: target> span
Aggiungeremo anche un bordo in fondo ai nostri sottomenu espansi:
.menu> li: target> ul height: auto; border-bottom: 1px solid # 51555a;
OK, Orman sarà felice :) Guarda cosa abbiamo finora.
Lo so. Stai urlando allo schermo "E le transizioni lisce ?!" Ho paura che sarai deluso. A meno che non specificiamo un'altezza definita per i sottomenu, non possiamo usare le transizioni CSS per espandere e comprimere senza problemi la nostra fisarmonica. Le transizioni non giocheranno bene con altezza: auto. Ovviamente tu poteva specificare un'altezza definita:
.menu> li: target> ul height: 7.9em; border-bottom: 1px solid # 51555a;
e quindi applicare le transizioni:
.menu> li> ul altezza: 0; overflow: nascosto; -webkit-transition: height 0.3s easy-in-out; -moz-transizione: altezza 0.3s easy-in-out; -o-transizione: altezza 0.3s easy-in-out; -ms-transizione: altezza 0.3s easy-in-out; transizione: altezza 0.3s easy-in-out;
... ma il tuo menu non sarà più flessibile al 100%. Sarai limitato a un numero specifico (3) di voci di sottomenu. Guarda la demo.
Cosa noi poteva fare, solo per appianare le cose, è aggiungere una transizione a un'altra proprietà. Non possiamo avere la transizione di altezza, quindi ci accontenteremo di una transizione di opacità:
.menu> li> ul altezza: 0; overflow: nascosto; opacità: 0; filtro: alfa (opacità = 0); / * IE6-IE8 * / -webkit-transition: opacity 0.9s easy-in-out; -moz-transition: opacity 0.9s easy-in-out; -o-transizione: opacità 0.9s facilità-in-out; -ms-transition: opacity 0.9s easy-in-out; transizione: opacità 0.9s easy-in-out; .menu> li: target> ul height: auto; border-bottom: 1px solid # 51555a; opacità: 1; filtro: alfa (opacità = 100); / * IE6-IE8 * /
Quello che abbiamo fatto è impostare l'opacità di default del sottomenu su 0; non solo ha un'altezza di 0, è ora anche trasparente. Quindi impostiamo anche le transizioni sullo stato predefinito. Nello stato di hover, si apre ancora a tutta apertura, ma poi i contenuti svaniscono in vista. Un po 'più facile per gli occhi.
Un altro problema è il fatto che :bersaglio non è riconosciuto dai browser più vecchi (Internet Explorer 8 e seguenti), quindi il nostro menu compresso è reso inutile in quei browser. Applichiamo un paio di metodi alternativi, che renderanno almeno la navigazione accessibile.
Innanzitutto, aggiungeremo un commento condizionale (dopo la nostra richiesta CSS iniziale) per caricare un file CSS secondario se il browser è Internet Explorer 8 o precedente:
Poi in quel file ripetiamo semplicemente le regole su cui abbiamo appena lavorato, ma invece di usare :bersaglio, noi usiamo : hover.
.menu> li: hover> ul height: 7.9em; border-bottom: 1px solid # 51555a;
Ancora una volta, controlla la demo. Non esattamente quello che cercavamo, ma almeno è una navigazione accessibile e compatibile con le versioni precedenti.
Data la scelta, probabilmente continuerai a optare per l'approccio jQuery; è ugualmente accettato in tutti i browser (purché JavaScript sia abilitato) e l'effetto è più fluido. Eppure, se tu non fossi a conoscenza del :bersaglio selettore, questo suggerimento rapido si spera possa averti dato un'idea di più potenziale CSS.
