In genere gli sviluppatori web hanno utilizzato JavaScript per creare animazioni di pagine dinamiche. I menu nascosti e la sottonavigazione sono solo un paio di esempi su come queste tecniche verrebbero utilizzate su un sito web dal vivo. Grazie all'aggiunta delle transizioni CSS3 ora possiamo imitare queste animazioni, senza JavaScript in vista.
In questo tutorial voglio dimostrare come costruire una barra interna nascosta che scorra verso il basso quando si libra. Puoi posizionarlo nell'intestazione, nel piè di pagina o persino in qualche punto all'interno del contenuto della pagina. È una tecnica molto flessibile che non richiede molto tempo per funzionare. Inoltre, tutti i browser Web moderni supporteranno gli effetti di transizione CSS3.
Demo dal vivo - Scarica il codice sorgente
Creare l'HTML
La pagina index.html principale è molto semplice e non è necessario includere alcuna libreria alternativa. jQuery non è nemmeno necessario a meno che tu non voglia usare altri plugin. Conserverò tutti i codici CSS delle pagine Web principali all'interno di un documento chiamato styles.css.
Ora per fare in modo che la barra div nascosta si espanda al passaggio del mouse, è necessario averlo inserito nella barra principale principale. Ogni volta che un utente passa su un elemento in jQuery, possiamo forzare un altro elemento interno a rimanere aperto con esso. Tuttavia, quando si utilizzano le transizioni CSS3, creano immediatamente eventi al passaggio del mouse e eventi non al passaggio del mouse. Quindi, non appena l'utente sposta il cursore lontano dalla barra in alto, nasconderà immediatamente il div a meno che non sia annidato all'interno.
Quindi ho creato un nuovo div con l'ID #tophiddenbar. È annidato dentro #topbar perché come elemento figlio, manterrà lo stato di passaggio del mouse per tutti gli elementi. Passare il mouse sopra la barra nascosta ora è anche a parte #topbar e così le transizioni CSS non si nasconderanno immediatamente prima di poter leggere o fare clic sui collegamenti. Non mi sono preoccupato di usare una lista non ordinata per i collegamenti, ma ovviamente questa sarebbe la migliore pratica quando si creano le proprie sotto-navigazioni HTML.
Documento CSS
In genere abbiamo gli stessi resettaggi e gli stessi stili del documento di altri tutorial simili. Tuttavia ci sono alcuni aggiornamenti al #topbar elemento cruciale per far funzionare tutto questo. Vale a dire che abbiamo bisogno del overflow: nascosto proprietà per assicurarsi che i contenuti extra non vengano visualizzati dopo il caricamento della pagina. Dovrai usarlo sul tuo elemento contenitore in modo che il div nascosto non venga visualizzato all'inizio, quindi aumentiamo il valore di altezza attraverso una transizione.
Se hai familiarità con le transizioni CSS, non dovrebbe essere difficile da cogliere. Fondamentalmente impostiamo un intervallo di tempo per l'animazione, insieme alle proprietà in cui abbiamo bisogno di effetti di transizione. Non è necessario includere tutti i ripristini CSS come ho aggiunto sopra. Sono solo importanti per questa demo e possono offrire un punto di partenza alternativo rispetto ad altre librerie come Twitter Bootstrap.
Animazione del menu
La proprietà di transizione effettiva verrà applicata all'elemento #topbar poiché stiamo animando il valore di altezza. Sto usando un'altezza fissa di 36px che aumenta per visualizzare il div nascosto interno. E ricorda che inizialmente questo div può essere visualizzato all'interno dell'ordine delle pagine, è nascosto solo a causa della proprietà di overflow sul contenitore #topbar elemento.
Quando si passa sopra la barra degli strumenti superiore, si espanderà fino a 60px in altezza. Questo spazio è sufficiente per mostrare la nostra nuova sotto-navigazione con i collegamenti alle pagine di Design Shack. Questo tipico design è davvero facile da inserire in qualsiasi altro progetto che hai. Finché lo sfondo può essere allungato verticalmente, può essere utilizzato come elemento contenitore.
Le proprietà di transizione CSS3 hanno anche due prefissi di vendor utilizzati nei motori di rendering di Mozilla e Webkit. Il lineare parola chiave è solo un tipo di stile di animazione che può essere omesso per il valore predefinito. Questa è chiamata la proprietà della funzione di temporizzazione della transizione e ha un numero selezionato di valori alternativi che puoi testare. In entrambi i casi questa animazione è perfetta per qualsiasi sito web che ha bisogno di mantenere un po 'di contenuto nascosto nella pagina.
Demo dal vivo - Scarica il codice sorgente
Conclusione
Noterai che questa tecnica implementa alcune tecniche CSS che sono più recenti per lo spettro. Tuttavia non è nulla di eccessivamente confuso per i tipici sviluppatori di web frontend. Esistono altri metodi possibili come l'utilizzo del posizionamento assoluto nidificato all'interno di un contenitore esterno. Avere entrambi i div uno vicino all'altro nell'HTML può a volte perdere la concentrazione quando si passa sopra l'elemento nascosto, quindi è meglio tenerli all'interno. Sentiti libero di condividere altri pensieri o domande su questo tutorial nell'area di discussione successiva di seguito.