Recent, unele site-uri, cum ar fi Aceasta este Brigada și tot ce. Am început să folosească meniul animat dinamic, care se schimbă dimensiunea pe măsură ce derulați în josul paginii. Reducerea dimensiunii a barei de navigare, lasă mai mult loc pentru conținut. În acest tutorial vă voi arăta cum să facă un astfel de meniu flotant folosind HTML5, CSS3 și un pic de jQuery.
Acest tip de meniu este mare, dacă doriți să se concentreze atenția utilizatorului asupra conținutului și, în același timp, pentru a face un bar mare de navigare. În acest caz, atunci când deschideți pagina, puteți afișa, de exemplu, un logo mare, pe măsură ce derulați bara de navigare pagină va fi redusă prin concentrarea atenției asupra conținutului.
Există mai multe modalități de a crea un astfel de meniu. În acest tutorial vă voi arăta cum să creați un meniu plutitor care va schimba gazonul, împreună cu un logo, creând o versiune simplă la scară redusă. Puteți înlocui, de asemenea, logo-ul la o versiune diferită a imaginii, cum ar fi inițialele sau pictograma.
Înainte de a începe, puteți vedea un demo, sau descărcați exemple de cod sursă.
Acum, să adăugați codul pentru meniul, precum și alte detalii în capul nostru fisier HTML.
Creați un HTML structură de bază
Începem prin scrierea unui cod HTML de bază de care avem nevoie. Punctul de plecare este un foarte simplu HTML5 structura.
am adăugat meta tag-ul autorului, pentru a specifica creatorul de fișiere; În continuare am conectat celebrul reset.css Erika Meyera pentru a reseta elementele de stil implicit în HTML-fișier, ajunge la locul de muncă curat și documentul mai simplu. Și, din moment ce vom folosi JQuery mai târziu, în ultimul rând al elementului de cap am conecta prin intermediul JQuery CDN.
Am conectat de cele mai multe fișiere de la distanță, pentru a salva un document cât mai simplu posibil, dar, dacă preferați, puteți descărca cele mai recente versiuni ale tuturor acestor fișiere și să le folosească pe plan local, iar acest lucru poate preveni posibilele probleme de compatibilitate sau modificări ale acestor fișiere în viitor.
Am folosit elementul standard de HTML5 . nostru Se va întinde pe întreaga lățime și de a se adapta la o versiune mare și mică a meniului. element de antet am adăugat o clasă de «mari», prin care putem schimba unele proprietăți ale meniului CSS atunci când comutați la o versiune mai mică. element