Creați un meniu rapid, lipicios

Vom folosi date-icoane atribut pentru a specifica icoanele noastre font. Pictogramele de fonturi vor fi utilizate pentru a decora în mod eficient elementele noastre din meniul principal. Graficele de fonturi pot fi scalate și colorate fără pierderi de rezoluție, în timp ce utilizarea imaginilor bitmap oferă o mai mică flexibilitate. Vom vorbi despre asta mai mult pe măsură ce progresăm.

Pasul 3: Adăugarea conținutului de umplere

Pentru a evidenția ceea ce se întâmplă, să adăugăm un text și un logo fals. Asigurați-vă că există suficient conținut pentru a vă derula dacă doriți să vedeți rezultatul final în gloria sa completă ...

 
  
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
 
În cazul în care există o eroare în cazul în care o eroare de ansamblu este eronată, aceasta este o problemă care poate fi văzută de o persoană,.
 
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consecutive magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ei temporal temporal incidente ut labore et dolore magnam aliquam quaerat voluptatem.
 

Pasul 4: Stiluri generale

Mai intai vom incarca Reset CSS al lui Eric Meyer, plasandu-l in partea de sus a fisierului nostru css deasupra celorlalti selectori:

 corp font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans serif; greutatea fontului: 500; font-size: 1.1; culoare: # 34495E; fundal-culoare: # ECF0F1;  div.wrapp lățime: 70%; marja: 0 auto;  p marginea-jos: 4em;  .logo max-lățime: 100%; 

Veți observa că am făcut-o div.wrapp 70% lățime, plus am afirmat că imaginile ar trebui să aibă o lățime maximă de 100%. Acesta este un început solid atunci când se construiește un aspect fluid.

Pasul 5: Styling Bara de instrumente

În continuare, vom adăuga câteva stiluri de bare de instrumente - mai întâi prin fixarea ambalajului în lateralul paginii, eliminându-l efectiv din fluxul de documente.

 div.toolbar-wrapp poziție: fix; afișare: bloc; top: 30%;  div.stic-bara de instrumente poziție: relativă; top: 30%; padding: .1em; fundal-culoare: # 2C3E50; plutește la stânga; -webkit-border-radius: 0 .2em .2em 0; -moz-border-radius: 0 .2em .2em 0; raza de raza: 0 .2em .2em 0; 

Notă: Este foarte important să declarați poziție: relativă pentru div.sticky-bara de instrumente deoarece ne va permite să poziționăm în mod corespunzător alte elemente împotriva sa.

Pasul 6: @ Font-face Sarcină

După cum am menționat mai devreme, nu vom folosi imagini bitmap pentru icoanele noastre. În schimb, vom folosi @ font-face pentru a trage în fișierele de fonturi pentru utilizare în browser.

@ font-face este o regulă CSS care vă permite să descărcați un anumit font de pe serverul dvs. pentru a reda o pagină Web dacă utilizatorul nu a primit acel font instalat. Aceasta înseamnă că web designerii nu vor mai trebui să adere la un anumit set de fonturi "în siguranță" pe care le-a instalat în prealabil pe computer.

Vom folosi Entypo; un pachet Open Source de icoane gratuite pentru uz comercial și personal. Are PSD, EPS, PDF, OpenType, TrueType și alte fișiere, așa că le vom descărca pentru utilizare în proiectul nostru.

Iată declarațiile noastre @ font-face, pe care le inserăm în fișierul nostru CSS. Asigurați-vă că căile indică corect fișierele de fonturi din cadrul proiectului, altfel nu vor apărea.

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

Acum selectăm toate elementele din marcajul nostru cu date-icoane atribut, abordarea a :inainte de pseudo element pe fiecare și umplând acel element pseudo cu orice caractere sunt ținute în interiorul date-icoane valoare.

 [data-icon]: înainte de font-family: 'Entypo'; conținut: attr (date-icon); 

De exemplu, aceasta este prima noastră ancoră:

iar CSS va folosi valoarea 📣 pentru a umple sale :inainte de element.

Pasul 7: Modelarea elementelor barei de instrumente

Să adăugăm niște efecte minunate căutând icoanelor noastre ...

 div.stic-bara de instrumente ul li a display: bloc; lățime: .8em; marjă: 0,2; înălțimea liniei: 80%; font-size: 2.2; text-align: centru; culoare: #fff; fundal-culoare: # 16A085; -webkit-border-radius:. -moz-border-radius: .1m; raza de graniță: .1em; -webkit-transition: toate 0.1s ușurință-out-out; -moz-tranziție: toate 0.1s ușurință-în-out; tranziție: toate cu ușurință în afară; -webkit-font-smoothing: antialiased; 

Notă: Pentru a maximiza pictogramele webfont clare și clare (cel puțin în browserele webkit), includeți a -webkit-font-smoothing: antialiased; la această secțiune. Ați putea, de asemenea, să aplicați acest lucru Tot utilizând selectorul global: * -webkit-font-smoothing: antialiased;

Acum adăugați niște efecte de hover și ați terminat.

 div.stic-bara de instrumente ul li a: hover fundal-culoare: # 1ABC9C; 

Pasul 8: Modelarea meniului pop-up

Acest lucru este tratat cu bara de meniu, acum să adăugăm un stil în meniul pop-up:

 div.popup display: none; float: dreapta; poziție: relativă; stânga: 5%; fundal-culoare: # 2C3E50; -webkit-border-radius: .2em; -moz-border-radius: .2em; raza de graniță: .2em; 

Notă: În starea implicită trebuie să ascundem această secțiune afișare: niciunul;. Mai târziu vom comuta vizibilitatea cu jQuery. Acum puteți lăsa valoarea afișată goală, până când ați terminat stilul, dar nu uitați să-l aduceți mai târziu.

Pasul 9: Styling Elementele meniului pop-up

Depare! Să adăugăm un stil pentru elementele de meniu:

 div.popup ul li a poziție: relativă; afișare: inline-block; font-size: .85em; culoare: #fff; umplutură: 0 2em 0 2em; marja: .4em; text-align: centru; text-decoration: nici unul; tranziție: toate cu ușurință în afară; -webkit-border-radius: .2em; -moz-border-radius: .2em; raza de graniță: .2em; 

și un simplu :planare efect:

 div.popup ul li a: mutați background-color: # 1ABC9C; 

Pasul 10: Creați o săgeată cu CSS

În loc să creați o imagine transparentă a săgeții .png, vom folosi un truc frumos creând același efect (deși complet scalabil) cu granițele CSS. Este posibil să utilizați pseudo-elemente și pentru acest lucru, dacă preferați să nu vă loviți marcajul cu elemente suplimentare:

 .săgeată poziție: absolută; top 10%; stânga: -4; lățime: 0; înălțime: 0; border-top: 0,5mm solid transparent; frontieră-dreapta: .5m solid # 2C3E50; frontieră de fund: .5em solid transparent; 

Pentru mai multe detalii despre modul în care se realizează acest lucru, consultați acest sfat rapid al CSS Triangles de Joren Van Hee.

Pasul 11: Crearea unei funcții de comutare

Pentru ultimul pas vom folosi un fragment jQuery, permițându-ne să schimbăm meniul pop-up. Adăugați următoarele

Notă: Asigurați-vă că ați inclus return false , care vă va împiedica să vă întoarceți în partea de sus a paginii de fiecare dată când faceți clic pe pictogramă.