Crea un menu rapido e appiccicoso

Useremo il data-icone attributo per specificare le nostre icone dei caratteri. Le icone dei caratteri verranno utilizzate per decorare in modo efficace le voci del menu principale. I glifi dei caratteri possono essere ridimensionati e colorati senza perdita di risoluzione, mentre l'uso di immagini bitmap offre meno flessibilità. Ne parleremo di più mentre progrediamo.

Passaggio 3: aggiunta del contenuto del riempitivo

Per evidenziare cosa sta succedendo, aggiungiamo un testo fittizio e un logo. Assicurati che ci sia abbastanza contenuto da far scorrere se vuoi vedere il risultato finale nella sua piena gloria ...

 
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Sed ut perspiciatis unde omnis iste natus errore sedersi voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nequero porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 

Passaggio 4: stili generali

Innanzitutto caricheremo il Reset CSS di Eric Meyer, posizionandolo nella parte superiore del nostro file css sopra altri selettori:

 body font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 500; font-size: 1.1em; colore: # 34495E; background-color: # ECF0F1;  div.wrapp width: 70%; margine: 0 auto;  p margin-bottom: 4em;  .logo larghezza massima: 100%; 

Noterai che ho creato il div.wrapp Largo del 70%, inoltre ho affermato che le immagini devono avere una larghezza massima del 100%. Questo è un solido inizio quando si costruisce un layout fluido.

Passaggio 5: Disegnare la barra degli strumenti

Successivamente aggiungeremo alcuni stili di barre degli strumenti: innanzitutto sistemando il wrapper sul lato della pagina, rimuovendolo efficacemente dal flusso del documento.

 div.toolbar-wrapp position: fixed; blocco di visualizzazione; superiore: 30%;  div.sticky-toolbar position: relative; superiore: 30%; imbottitura: .1em; background-color: # 2C3E50; fluttuare: a sinistra; -webkit-border-radius: 0 .2em .2em 0; -moz-border-radius: 0 .2em .2em 0; border-radius: 0 .2em .2em 0; 

Nota: È molto importante dichiarare posizione: relativa per div.sticky-barra degli strumenti in quanto ci consentirà di posizionare correttamente altri elementi contro di esso.

Passaggio 6: @ Font-face Caricare

Come accennato in precedenza, non useremo le immagini bitmap per le nostre icone. Invece, useremo @ font-face per inserire i file dei font da utilizzare nel browser.

@ font-face è una regola css che ti consente di scaricare un particolare tipo di carattere dal tuo server per eseguire il rendering di una pagina web se l'utente non ha installato quel font. Ciò significa che i web designer non dovranno più aderire a un determinato set di caratteri "sicuri per il Web" che l'utente ha preinstallato sul proprio computer.

Useremo Entypo; un pacchetto Open Source di icone gratuite per uso commerciale e personale. Ha un PSD, EPS, PDF, OpenType, TrueType e vari altri file, quindi scaricali per utilizzarli nel nostro progetto.

Ecco le nostre dichiarazioni @ font-face, che incolliamo nel nostro file CSS. Assicurati che i percorsi puntino correttamente ai file di font all'interno del progetto, altrimenti non verranno visualizzati.

 @ font-face font-family: 'Entypo'; src: url ('... /font/entypo.eot'); src: local ('☺'), url ('... /font/entypo.woff') formato ('woff'), url ('... /font/entypo.ttf') formato ('truetype'), url (' ... /font/entypo.svg#webfontIyfZbseF ') formato (' svg '); 

Ora selezioniamo tutti gli elementi all'interno del nostro markup con data-icone attributo, virata a :prima pseudo elemento su ognuno di essi e riempiendo questo pseudo elemento con qualunque personaggio sia contenuto nel data-icone valore.

 [data-icon]: before font-family: 'Entypo'; contenuto: attr (data-icon); 

Ad esempio, questa è la nostra prima ancora:

e il nostro CSS userà il valore 📣 per riempire il suo :prima elemento.

Passaggio 7: modellazione degli elementi della barra degli strumenti

Aggiungiamo alcuni effetti interessanti alle nostre icone ...

 div.sticky-toolbar ul li a display: block; larghezza: .8em; margine: 0,2em; altezza della linea: 80%; font-size: 2.2em; allineamento del testo: centro; colore: #fff; background-color: # 16A085; -webkit-border-radius: .1em; -moz-border-radius: .1em; border-radius: .1em; -webkit-transition: tutti gli 0.1s easy-in-out; -moz-transition: tutti gli 0.1s easy-in-out; transizione: tutti gli 0.1s easy-in-out; -webkit-font-smoothing: antialiased; 

Nota: Per massimizzare le icone del webfont nitide e chiare (almeno nei browser Webkit), includi a -webkit-font-smoothing: antialiased; a questa sezione. Si potrebbe anche applicare questo a qualunque cosa usando il selettore globale: * -webkit-font-smoothing: antialiased;

Ora aggiungi alcuni effetti al passaggio del mouse e il gioco è fatto.

 div.sticky-toolbar ul li a: hover background-color: # 1ABC9C; 

Passaggio 8: modellazione del menu a comparsa

Questo viene trattato con la nostra barra dei menu, ora aggiungiamo un po 'di stile al menu a comparsa:

 div.popup display: none; float: giusto; posizione: relativa; a sinistra: 5%; background-color: # 2C3E50; -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; 

Nota: Nel suo stato predefinito dobbiamo nascondere questa sezione con display: nessuno;. In seguito potremo attivare la visibilità con jQuery. È possibile lasciare il valore di visualizzazione vuoto per ora, fino a quando non si finisce lo stile, ma non dimenticare di riportarlo in un secondo momento.

Passaggio 9: modellazione degli elementi del menu a comparsa

In avanti! Aggiungiamo uno stile per gli elementi del menu:

 div.popup ul li a posizione: relativa; display: blocco in linea; font-size: .85em; colore: #fff; riempimento: 0 2em 0 2em; margine: .4em; allineamento del testo: centro; decorazione del testo: nessuna; transizione: tutti gli 0.1s easy-in-out; -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; 

e un semplice : hover effetto:

 div.popup ul li a: hover background-color: # 1ABC9C; 

Passaggio 10: crea una freccia con CSS

Invece di creare un'immagine di freccia .png trasparente, utilizzeremo un trucco piacevole creando lo stesso effetto (sebbene completamente scalabile) con i bordi CSS. È anche possibile utilizzare pseudo elementi anche per questo, se preferisci non infangare il tuo markup con elementi aggiuntivi:

 .arrow position: absolute; superiore: 10%; a sinistra: -.4em; larghezza: 0; altezza: 0; border-top: .5em trasparente solido; border-right: .5em solid # 2C3E50; border-bottom: .5em solid transparent; 

Per ulteriori dettagli su come è stato raggiunto, dai un'occhiata a questo suggerimento rapido di CSS Triangles di Joren Van Hee.

Passaggio 11: creazione di una funzione di commutazione

Per l'ultimo passaggio utilizzeremo uno snippet di jQuery, che ci consentirà di attivare il nostro menu a comparsa. Aggiungi il seguente

Nota: Assicurati di aver incluso il restituisce falso dichiarazione, che ti impedirà di tornare all'inizio della pagina ogni volta che fai clic sull'icona.