Oggi ci divertiremo tutti. Per prima cosa costruiremo un menu animato usando un nuovo lucido CSS3 mentre impariamo a implementare pseudo selettori in modo pratico su un progetto reale. Poi lo seguiremo con come costruire la stessa cosa senza pseudo selettori per un migliore supporto del browser. Infine, termineremo con uno sguardo su come eliminare tutti quei fantasiosi CSS in favore di un buon jQuery vecchio stile.
Unisciti a noi mentre esaminiamo non uno ma tre modi per affrontare un menu di navigazione scorrevole CSS!
Perchè Pseudo Selettori?
Uno degli scopi principali di questo articolo è illustrare un esempio di mondo reale per l'utilizzo di pseudo selettori che non è l'ovvio tutorial della tabella.
I pseudo selettori fanno molta pubblicità sui blog di design, ma quando arriva il momento dei commenti vedo sempre la stessa domanda: "Fantastico, ma quando mai li userò davvero ?? A volte veniamo coinvolti con l'uso di esempi ridicoli e irrealistici solo per mettere in mostra qualche nuovo giocattolo, nel frattempo i lettori lo segnalano immediatamente come qualcosa di ordinato? ma non tutto ciò che sarà mai pratico.
Il nostro menu di navigazione oggi getterà solo un paio di pseudo selettori in un modo molto rapido, che è esattamente come userete questi ragazzi in futuro.
Cosa stiamo costruendo?
L'obiettivo qui è quello di creare un semplice menu di navigazione CSS composto da blocchi rettangolari con uno sfondo rosso. Quando l'utente passa sopra la voce di menu, ci sarà un'animazione scorrevole e cambieranno sia il messaggio sia il colore di sfondo della voce di menu.
È quasi come un effetto di apertura della porta del garage applicato tramite animazioni CSS. È un progetto divertente e l'effetto finale è fantastico.
Primo passo: l'HTML
La nostra struttura HTML è molto succinta, solo un div contenente una lista non ordinata con tre voci di elenco. Gli elementi della lista potrebbero sembrare un po 'strani a prima vista, ognuno non ha uno ma due link, uno subito dopo l'altro. Controlla:
Ogni voce di elenco rappresenta un elemento di navigazione. Ogni elemento di navigazione ha due stati distinti: predefinito e passaggio del mouse. I due collegamenti rappresentano ciascuno stato. Si noti come, al passaggio del mouse, ho modificato i messaggi passivi in un invito all'azione:? diventa? Incontraci ?, questo sottilmente aiuta a incoraggiare il comportamento dei clic.
Questo è tutto il codice HTML di cui abbiamo bisogno per questo round. Puoi già iniziare a pensare a come indirizzare in modo diverso ciascun link nella voce di elenco. Sarebbe abbastanza difficile senza i nostri amici pseudo-selettori.
Passo 2: Menu iniziale CSS
Per iniziare il CSS, avremo bisogno di definire l'area del menu nel suo complesso. Ogni voce di menu sarà alta 100 px per 200 px e ne avremo tre. Questo ci dà un'area totale di 100 px per 600 px per il menu nel suo insieme. Aggiungi dieci pixel di riempimento per ciascuno dei tre elementi e il nostro totale complessivo diventa 100 px per 630 px.
Dopo aver impostato l'altezza e la larghezza, ho semplicemente centrato il menu con il suo testo e nascosto l'overflow, che sarà importante con l'animazione in seguito.
Passaggio 3: stile i collegamenti
Avanti, fissiamo l'estetica delle voci del menu. Per prima cosa prendiamo di mira gli elementi dell'elenco e li spostiamo a sinistra con alcuni margini. Poi lo seguiamo disegnando tutti i link nel menu.
Essenzialmente abbiamo trasformato ciascun link in un grande blocco rosso:
Si noti che questo stile ha effettivamente tagliato il secondo link in ogni set. Quello che sta succedendo è che il secondo link in ogni elemento della lista è accatastato sotto il primo ed è semplicemente nascosto. Se spegniamo temporaneamente? Overflow: nascosto? questo diventa molto più facile da visualizzare.
Passaggio 4: modificare gli stili di collegamento secondari
Si noti nell'immagine sopra che, sebbene abbiano un testo diverso, i collegamenti superiore e inferiore sono essenzialmente identici. Cambiamo un po 'questo per rendere la transizione più evidente. Per fare ciò cambiamo semplicemente la seconda casella di ogni serie in nero e il testo in bianco.
La parte più difficile è, come possiamo mirare solo al secondo link? Non abbiamo incluso nulla nell'HTML per impostare i due a parte: nessuna classe, nessun ID, niente. È qui che entrano in gioco quegli oh pseudo selettori così utili! Usando pseudo selettori, possiamo facilmente indirizzare ogni altro link attraverso l'uso di pari o dispari.
Questo selettore sembra un po 'complicato, quindi affrontiamolo. Per prima cosa selezioniamo l'ID del menu, quindi analizziamo l'elenco non ordinato e in particolare i tag di ancoraggio in tale elenco. Successivamente aggiungiamo il nostro pseudo-selettore?: Nth-of-type (even) ?, che ha come target solo il secondo link in ciascuno dei nostri insiemi di link.
Ora possiamo aggiungere alcuni stili per distinguerli dai blocchi rossi:
Ora, se ancora una volta commentiamo temporaneamente? Overflow: nascosto? possiamo vedere che i nostri link hanno molta più differenziazione.
Passaggio 5: azione di scorrimento al passaggio del mouse
Ora è il momento di definire l'azione che si svolgerà al passaggio del mouse. Fondamentalmente vogliamo che il link rosso scorra e scompaia quando viene visualizzato il link nero.
Sembra abbastanza facile, ma una volta che ci pensi, questa azione diventa super difficile! Vogliamo che il link in alto venga spostato verso l'alto quando passiamo il mouse sopra il pulsante, ma dal momento che scompare dalla vista, non ti passerai sopra al passaggio del mouse, causando un'azione davvero caotica.
Dopo un pensiero serio, sono arrivato alla seguente conclusione. Dobbiamo scegliere come target l'intero elemento della lista per l'evento hover, in questo modo, indipendentemente dal fatto che il link in alto o in basso sia visibile, tutto funziona ancora. Tuttavia, nonostante il fatto che il passaggio del mouse sull'elemento della lista debba attivare l'evento, è davvero qualcos'altro, il primo link, che deve essere spostato.
La traduzione di questi obiettivi in CSS è simile a questa:
Molte persone non se ne rendono conto, ma non devi agire sull'elemento su cui hai impostato lo stato di passaggio del mouse. Qui stiamo attivando il passaggio del mouse sulla voce dell'elenco ma spostando il primo figlio (grazie pseudo-selettore) di quell'elemento, che in questo caso sarà il collegamento superiore.
Per rendere questa transizione uniforme, rivisitiamo il codice Step 3 e aggiungiamo alcune belle transizioni CSS3.
Finito! Versione pseudo selettore
Con ciò, la nostra prima versione è completa! Le nostre animazioni sembrano grandiose e gli pseudo selettori stanno facendo il lavoro pesante per mantenere il nostro markup bello e pulito.
demo: Clicca qui per il lancio.
Scaricare: Clicca qui per scaricare tutte e tre le versioni.
Rimozione dei selettori Pseudo
Personalmente amo pseudo selettori, selettori di attributi e tutti gli altri gadget forniti da CSS3. Il supporto è in realtà abbastanza buono per loro su tutta la linea con quasi tutti i principali browser che suonano, tra cui IE9!
Tuttavia, il browser peggiore della storia non andrebbe e non sarebbe un problema al collo così ovviamente qualsiasi cosa più vecchia di IE9 avrà problemi con questi selettori. Poiché la maggior parte delle persone si è appena limitata a rottamare il supporto IE6, siamo lontani anni dall'ignorare IE6 e IE7.
Se vuoi implementare questo menu in un progetto dal vivo, è probabilmente un'idea migliore per andare avanti e utilizzare invece le classi nel tuo codice HTML. Vediamo come funziona.
HTML
Alla luce della nostra decisione di buttare via i nostri pseudo selettori sperimentali, dovremo aggiungere una classe in più per facilitare il targeting del primo collegamento senza influenzare il secondo in ogni elemento della lista. Qui ho appena buttato dentro un? Top? classe su ogni link che si trova in cima.
CSS
Ora con questo markup extra, non abbiamo bisogno degli pseudo selettori nel nostro CSS. Possiamo invece usare semplicemente le classi, che hanno un supporto universale.
Finito! Versione non pseudo-selettiva
La nostra seconda versione è completa! Per quelli di voi non appassionati di pseudo selettori, ecco una versione senza di essi.
demo: Clicca qui per il lancio.
Scaricare: Clicca qui per scaricare tutte e tre le versioni.
Usando jQuery per le animazioni
Come ultima alternativa, potresti lanciare le animazioni CSS ed eseguire le stesse azioni con jQuery (o forse usare jQuery come fallback tramite Modernizr).
Basandosi sulla precedente versione non pseudo-selettiva, disattiva le animazioni CSS e lancia questo bit di jQuery:
Come puoi vedere, questo ha lanciato l'effetto hover sull'elemento della lista e anima la transizione proprio come abbiamo fatto in CSS. I risultati sono quasi identici e dovrebbero funzionare in quasi tutti i browser a condizione che non abbiano JavaScript disabilitato.
La mia versione originale di questo è stata un po 'eccentrica con le ripetizioni delle animazioni, quindi una grande novità per Adrian Pelletier che ha un progetto simile che mi ha ricordato di lanciare la funzione jQuery stop!
Finito! Versione jQuery
La nostra versione finale utilizza la stessa struttura della precedente, ma lancia le transizioni CSS in favore di jQuery. Guarda.
demo: Clicca qui per il lancio.
Scaricare: Clicca qui per scaricare tutte e tre le versioni.
Conclusione
Questo tutorial non ti ha dato uno, ma tre metodi diversi per ottenere lo stesso fantastico menu animato scorrevole. La prima versione illustra perfettamente l'utilità degli pseudo selettori in progetti reali. Il secondo ritaglia gli pseudo selettori per coloro che cercano una versione più ampiamente compatibile. La versione finale utilizza jQuery per le animazioni invece delle transizioni CSS3.
Lascia un commento qui sotto e facci sapere quale versione useresti sul tuo sito oggi o come la modificheresti!