Creați un meniu dinamic și animat
LPgenerator - Professional Pagina de destinație Platforma pentru a crește vânzările afacerii dvs.
MAGAZIN UNIVERSITATEA Aterizare ACTIUNI DIN PARTENERII
Cu siguranță ați văzut pe unele site-uri dinamice și meniuri animate, care se schimba pe măsură ce defilați în jos. Minimizarea meniul principal de navigare, vă lăsați mai mult spațiu pentru conținut. In acest tutorial vom explica modul în care vă puteți crea propriul meniu folosind HTML5, CSS3 și un pic de jQuery.
Există mai multe moduri de a face acest lucru. In acest tutorial vom explica cum de a crea un meniu fix pagină întreagă lățime care variază în înălțime, împreună cu un logo, creând minimiza versiunea inițială a originalului. Dacă se dorește, puteți înlocui, de asemenea, logo-ul pe o altă opțiune, cum ar fi inițialele sau pictograma, dar rețineți că coerența este foarte importantă aici, astfel încât utilizatorul înțeles ca un element schimbat și că principalul obiectiv este în continuare site-ul de navigare.
Crearea unei structuri de bază în HTML5
Începem prin crearea unui cod HTML de bază de care avem nevoie. Pentru început, vom lipi la o structură HTML5 foarte simplu.
Acum, atunci când codul HTML original este scris, vom adăuga codul pentru meniul, precum și alte elemente pentru HTML nostru fișier antet.
Din moment ce aici nu avem nici un conținut,
Și totul face parte din HTML. Acum trebuie să ne elementele de stil folosind CSS și de a face un meniu dinamic.
meniuri coafurii si pagini
Pentru a salva acest cod într-un singur fișier, vom crea CSS
. Astfel, toate CSS nostru va fi înaintea etichetei de închidere .
Un pic de CSS pentru a face meniul nostru în lățimea de 960 mijloc, în organizarea meniul nostru la dreapta și la stânga a logo-ului. Importam de asemenea de fonturi amarant din fonturi web Google, să-l folosească pentru textul nostru pe pagina.
Aici, vom face doar pagina stretch pentru a provoca o defilare (parcurgere), precum și poziționarea textului pentru a indica începutul și sfârșitul conținutului.
Aici vom termina stilul de bază al nostru din titlu.
schimba dimensiunea meniu dinamic
Meniul nostru este realizat și stil, dar încă mai doresc să lucreze la minimizarea acesteia. Pentru a crea acest „statut“, vom crea o nouă clasă de
Deci, după cum puteți vedea, aceste stiluri sunt aproape identice cu cele din majoritatea meniurilor, am schimbat doar clasa de „mare“ la „mic“ și schimba valorile pe care le-am folosit pe cele mai mici. Noi folosim negativ marja de-top pe imagine pentru ao centralizeze în container, deoarece imaginea are o umbră subțire, și mai mare decât scrisul pentru accesoriile sale. Acum, că avem toate stilurile necesare pentru a personaliza redimensionării de meniu, și dacă încercați să-l schimbe în dvs.
Schimbarea clasei meniu cu jQuery
În cazul în care utilizatorul a defilat mai mult de 100 de pixeli, atunci clasa de «mare», atunci acesta va fi eliminat, pe care le-am creat, și a adăugat noua clasă de «mici». Astfel, meniul se va schimba în mărime așa cum am definit anterior în CSS. Încercați-l, de data aceasta ar trebui să fie deja de lucru, dar este posibil să observați că tranzițiile dintre clase, par să fie foarte ascuțite.
tranziții CSS pentru meniul de animație
Pentru a comuta fără probleme între clase din meniul nostru, vom folosi tranziții CSS. Doar folosi această bucată de cod de lângă restul CSS-ul.
Aici definim o tranziție pentru toate proprietățile CSS pentru și
LPgenerator - Professional Pagina de destinație Platforma pentru a crește vânzările afacerii dvs.
intrări aferente
ATENȚIE! Utilizați un browser învechit Internet Explorer
Acest site este construit pe tehnologii avansate, moderne și nu acceptă al doilea Internet Explorer și versiunea a șaptea.
