Share
Questo tutorial ti insegnerà come creare e animare un'icona del menu di un hamburger e quindi collegare un listener di eventi tramite jQuery per attivare un menu a discesa.
Userò Jade (Pug) e Sass invece di vaniglia HTML e CSS. Quindi dovresti almeno avere una conoscenza di base di questi motori di modelli.
Inizieremo con l'implementazione di un semplice parco giochi. Fornirò il modello Jade solo con lo stile Sass, dal momento che questo non è lo scopo del tutorial. Puoi prenderlo e usarlo o puoi inventare il tuo design.
File di giada:
body #container #header #body .content .left .right - for (i = 1; i <= 5 ; i++ ) div( + i ) .content .left .right - for (j=6; j <= 10 ; j++ ) div( + j ) .content .left .right - for (k=11; k <= 15 ; k++ ) div( + k )
File Sass:
= display flex (): display -webkit-box: -moz-box display: -ms-flexbox display: -webkit-flex display: flex = transition ($ time) -webkit-transition: all $ time ease -moz-transition : all $ time ease -ms-transition: tutto $ time ease -o-transition: tutto $ time ease transition: all $ time ease html, body margin: 0 padding: 20px 0 + flex () justify-content: center // ---------------------------------- // larghezza #container: 320px altezza: 550px background-color: #ebebeb overflow: nascosto altezza #header: 45px background-color: # 9b9b9b posizione: relativa #body padding: 0 20px padding-top: 40px + flex () flex-direction: colonna justify-content: flex-start .content + flex () flex-direction: riga justify-content: flex-start margin-bottom: 25px. larghezza: 100px height: 100px margin-right: 15px background-color: # e1e1e1 .right @for $ i da 1 a 15 # text # $ i margin-top: 10px width: 50 + random (100) + px height: 10px background-color: # e1e1e1
Nota: qui ho creato due mixin chiamati flettere e transizione. I missaggi semplificano il riutilizzo di alcune regole CSS raggruppandole. Ogni volta che ho bisogno di aggiungere Display: flettere con tutti i prefissi dei fornitori, posso solo usare +flettere() invece, grazie al mixin.
Useremo questa struttura e costruiremo su di essa per il resto del tutorial.
Il risultato finale dovrebbe assomigliare a questo:
Visualizza il codice corrente
Ora è il momento di creare un menu hamburger semplice ma attraente e animarlo attraverso i CSS.
Aggiungi un nuovo div all'interno #intestazione e nominalo #Hamburger. Quindi crea due bambini div all'interno #Hamburger. Dovrebbero avere una classe comune e ID individuali.
#hamburger .strip # top .strip # bottom
Ora dobbiamo dare uno stile al genitore #Hamburger div e i bambini div con la classe comune di .striscia.
#hamburger height: 100% width: 45 + flex () flex-direction: colonna justify-content: space-between padding-left: 20px
Impostiamo l'altezza del div uguale alla sua div genitrice, che è #intestazione, definendo il altezza: 100%. Inoltre, impostiamo un valore di larghezza per questo div padre, che definirà la sua regione "cliccabile".
Successivamente, aggiungiamo flexbox con tutti i prefissi dei fornitori utilizzando i mixin, che abbiamo creato in precedenza.
Dal momento che vogliamo il nostro .striscia divs per essere posizionati verticalmente, abbiamo impostato direzione della flessione: colonna e quindi usare justify-content: space-between al fine di mettere lo spazio tra il .striscia div.
Quindi dobbiamo spingere questi div uno verso l'altro aggiungendo il fondo e il pad superiore ai rispettivi div.
#top margin-top: 17px #bottom margin-bottom: 17px
Abbiamo anche aggiunto padding-left: 20px per spostare il .striscia si tuffa ulteriormente a destra.
La prossima cosa è modellare le strisce. Questo è relativamente facile semplicemente definendo la dimensione e il colore delle div.
.larghezza della striscia: 25px altezza: 2px background-color: #ffffff
Il risultato finale con l'icona del menu dell'hamburger dovrebbe essere simile a questo:
La prossima cosa è animare l'icona del menu in modo che quando viene cliccato, dovrebbe animare in un segno incrociato.
A questo punto, useremo jQuery di base per attivare alcune classi CSS.
Iniziamo con la creazione delle classi CSS da attivare.
Utilizzeremo le impostazioni di traduzione e rotazione di trasformare proprietà dei CSS insieme a transizione proprietà.
Innanzitutto, aggiungi le transizioni a entrambi #superiore e #parte inferiore div usando mixin con un parametro temporale specifico.
#top margin-top: 17px + transition (.25s) #bottom margin-bottom: 17px + transition (.25s)
Ora dobbiamo definire lo stile delle classi da attivare.
Roteremo e tradurremo ciascuno .striscia div individualmente, quindi abbiamo bisogno di attivare diverse classi sia per il #superiore e #parte inferiore div.
#top margin-top: 17px + transition (.25s) & .topRotate transform-origin: center transform: translateY (4px) rotateZ (45deg) #bottom margin-bottom: 17px + transition (.25s) e .bottomRotate transform-origin : center transform: translateY (-5px) rotateZ (-45deg)
Qui abbiamo definito lo stile per due classi diverse nominate .bottomRotate e .topRotate, che verranno aggiunti e rimossi dalle rispettive div di riferimento, #superiore e #parte inferiore.
Si noti che il diverso dimensionamento del .striscia la classe risulterebbe in un bisogno di diverso translateY e rotateZ valori per animare in un vero segno incrociato.
Abbiamo definito come ciascuno .striscia div si animerà quando il topRotate e bottomRotate le classi sono presenti Tuttavia, dobbiamo ancora associare un listener di eventi per attivare tali classi.
Creare un nuovo file JavaScript e utilizzare il seguente codice per alternare il topRotate e bottomRotate classi di immersioni con #superiore e #parte inferiore ID rispettivamente.
Accentsconagua
$ (document) .ready (function () $ ("# hamburger"). click (function () $ ("# top"). toggleClass ("topRotate"); $ ("# bottom"). toggleClass ( "bottomRotate"););)Abbiamo inserito tutto il nostro codice $ (Document) .ready (function () ) per aspettare che l'intera pagina venga caricata prima di intraprendere qualsiasi azione.
Quando clicchiamo sul #Hamburger div, alternerà le classi per le div con ID specifici.
Nota: non dimenticare di aggiungere il file sorgente jQuery nel progetto.
Visualizza il codice corrente
Il prossimo passo è creare un menu con voci di elenco.
Usa la seguente struttura sotto il #intestazione:
#dropDown #background ul li Home li Blog li Progetti li Autori li Jobs li Contatti
Quindi qui abbiamo usato il ul tag come genitore per raggruppare gli oggetti con Li tag come bambini. Inoltre, al fine di creare un'animazione in background in espansione, abbiamo aggiunto anche un div con l'ID di #sfondo.
Diamo uno stile al ul e Li elementi prima.
ul stile elenco: nessuna spaziatura: 0 margine: 0
Impostare il list-style a nessuna al fine di rimuovere i proiettili dal ul elementi e anche impostare entrambi imbottitura e margine a 0 per rimuovere tutti i valori predefiniti.
Adesso stile lo Li elementi:
li // display: none background-color: # 9b9b9b color: #ffffff font-family: 'Quicksand', sans-serif font-weight: più leggero font-size: 15px padding: 20px padding-left: 60px &: after position: contenuto assoluto: "left: 60px width: 60% height: 1px bottom: 4px background: rgba (255, 255, 255, 0.25) e: last-child: after width: 0
Qui ho commentato il display: none per poter vedere il risultato. Tuttavia, durante l'animazione, lo useremo per nascondere inizialmente gli elementi della lista.
Ho anche aggiunto il dopo pseudo-elemento e lo styled di conseguenza per separare ciascuno Li elemento con una linea retta. : Last-child: dopo rimuove questa linea per l'ultimo Li elemento.
Visualizza il codice corrente
Ora useremo alcune direttive di controllo Sass per aggiungere animazioni keyframe CSS con attributi diversi a ciascuna Li elemento.
@keyframes drop 0% opacity: 0 transform: scale (1.3) 100% opacity: 1 transform: scale (1) @keyframes fold 0% opacity: 1 transform: scale (1) 100% opacità: 0 transform: scale (0.7)
Qui abbiamo definito le animazioni dei fotogrammi chiave far cadere e piegare.
far cadere è per animare l'apertura della lista dei menu. Il ridimensionamento iniziale è del 30% in più e ridimensiona alla dimensione originale mentre la trasparenza passa da 0 a 1. L'azione opposta si svolge in piegare.
Ora dobbiamo attaccare quei fotogrammi chiave a Li elementi. Questa parte è dove il Sass è utile.
@for $ i da 1 a 6 li: nth-child (# $ i) animazione: nome: fold durata: 80ms * (6- $ i) + 1ms timing-function: modalità fill-in-out facilitato: inoltra li.anim: nth-child (# $ i) animazione: name: drop durata: 100ms * $ i timing-function: easy-in-out fill-mode: forward
Qui ho usato un per ciclo che va da 1 a 6 con l'indice di $ i.
Ora dobbiamo usare questo indice per allegare ogni animazione a Li elementi con durate diverse.
Innanzitutto, considera il li.anim: nth-child (# $ i) linea.
Qui stiamo afferrando il $ ifiglio del Li elemento con classe di anim.
Lo cambieremo anim classe. Quindi, quando viene aggiunto a Li elementi, l'animazione del fotogramma chiave con il nome di far cadere agirà. Quando viene rimosso, il piegare l'animazione prenderà provvedimenti.
La prossima cosa importante è la durata attributo.
durata: 100 ms * $ i per il far cadere l'animazione sta estendendo la durata dell'animazione per ogni numero di bambino incrementale. Quindi, quando questo codice è compilato, il primo Li il bambino avrà durata: 100ms, e l'ultimo bambino avrà durata: 600ms.
Questo darà il senso di animare ogni elemento uno dopo l'altro.
Facciamo la stessa cosa per il piegare animazione. Questa volta, l'ultimo elemento dovrebbe essere animato più velocemente, quindi durata: 80 ms * (6- $ i) + 1 ms. L'1ms aggiunto alla durata è dovuto al fatto che quando si imposta la durata su 0, è probabile che si verifichino alcuni problemi e l'animazione potrebbe non funzionare correttamente.
Quando stavamo disegnando il Li elemento, ho detto che dovevamo usare display: none per evitare giochi di animazione indesiderati. Se non lo si imposta nessuna, vedrai che il piegare l'animazione viene riprodotta una volta quando viene caricata la pagina.
Se impostiamo il display proprietà a nessuna, non lo vedremo, e quindi dovremo farlo mostrare il Li elemento prima di attivare il anim classe.
Vogliamo che le animazioni vengano riprodotte quando facciamo clic sull'icona dell'hamburger. Quindi usiamo alcuni jQuery per impostare il display proprietà di ciascuno Li articolo a bloccare e anche attivare il anim classe.
$ (document) .ready (function () $ ("# hamburger"). click (function () $ ("# top"). toggleClass ("topRotate"); $ ("# bottom"). toggleClass ( "bottomRotate"); $ ("li"). show (); $ ("li"). toggleClass ("anim"););)Visualizza il codice corrente
Noterai che possiamo vedere l'animazione di ciascuno Li elemento individualmente. Tuttavia, preferiremmo avere una sensazione di menu in espansione.
Per risolvere ciò, abbiamo semplicemente bisogno di espandere l'altezza di un div. Quel div è #sfondo, che inizialmente abbiamo aggiunto durante la creazione di ul e Li elementi.
Larghezza #background: 100% altezza: 0 colore di sfondo: posizione # 9b9b9b: assoluta + transizione (.45s) e altezza .expand: 550px
Attiveremo il espandere classe per impostare il altezza attribuire a 550px entro .45s. Nota che ho usato il transizione mixin per definire la transizione con un parametro temporale specifico.
Risultato finale
Nel corso di questo tutorial, ci siamo esercitati su come utilizzare i loop all'interno di HTML e CSS attraverso i motori di template di Jade e Sass. Inoltre, abbiamo creato animazioni di fotogrammi chiave CSS e le abbiamo associate con attributi di durata diversi a specifici elementi HTML. Quindi abbiamo attivato le classi con jQuery per controllare quelle animazioni.
