Share
Animația și feedback-ul vizual reprezintă modalități excelente de a asista un utilizator în navigarea și interacțiunea cu un site web. În timp ce, în mod tradițional, Flash-ul Adobe a fost gata pentru orice animat, în zilele noastre cu magia javascript putem evita Flash cu totul. Astăzi vom construi un meniu de navigație cu adevărat cool folosind doar CSS și jQuery.
Meniul pe care îl construim poate fi văzut în imaginea de mai jos. De asemenea, puteți vedea versiunea finală de lucru aici.
Voi rupe acest tutorial în cinci secțiuni după cum urmează:
Mai întâi de toate, să vedem ce trebuie să facem aici.
Deci, aici este o idee grosolană despre ceea ce ar trebui să facem:
Acum, de cele mai multe ori folosim
Așa că să rezumăm
AcasădespreServiciisoluţiia lua legatura
S-ar putea ajuta să arăt structura directoarelor pe care o cunosc. Structura directorului este după cum urmează:
Presupun că aveți cunoștințe de bază în tratarea Photoshop-ului, deci nu voi oferi instrucțiuni prea detaliate despre crearea resurselor.
Există câteva lucruri pe care trebuie să le creăm.
Rețineți că, dacă doriți să săriți peste acest pas, puteți descărca fișierul complet de fișiere de la sfârșitul tutorialului și extrage copiile mele!
Bine, să creăm fundalul antetului. Deschideți Photoshop și creați o pânză de 1x181 px sau puteți să o creați mai mare și apoi să decupați imaginea.
Creați un strat și dați-i un gradient liniar cu Preludiu la fundal presetat pentru 171 pixeli, acesta va fi gradientul principal.
Creați un alt strat și dați-i un gradient liniar cu Prefixul la Transparent presetat pentru aproximativ 10 pixeli în partea de jos a primului strat pentru un efect de umbră.
Iată cum ar trebui să arate, este 100x181 px pe care am mai recoltat până la 1x181 px.
Salvați ca 'Hdr-bkg.png' în a noastră 'Img' pliant.
Apoi, vom crea titlul de conținut. Din nou, deschideți Photoshop și creați imagini de 934x284 px.
Creați dreptunghi rotunjit utilizând instrumentul corespunzător, selectați forma creată, creați un strat nou, adăugați un gradient și dați-i niște umbre.
Atunci vom avea ceva de genul:
Salvați ca 'Conținut-title.png' în 'Img' pliant.
Acum, să creăm resursele necesare navigației. Avem nevoie de două seturi de navigație și o cutie albă.
Cutia albă este simplă. Doar creați un dreptunghi rotunjit de aproximativ 98px x 58px și pictați-l cu alb. Asigurați-vă că fundalul este transparent.
Salvați ca 'White.jpg' în 'Img' pliant.
Pentru elementul de navigare, deschideți-vă Photoshop-ul și creați un document de 490px x 58px.
Creați un dreptunghi rotunjit cu aproximativ 98px x 58px și puneți un text în el. Vom avea nevoie de două copii ale fiecărui text.
Am aplicat o mică umbră pe fiecare text, acest lucru este, desigur, opțional. Puteți alege propriile dvs. culori pentru a pune aici.
Acum, duplicați acest strat de-a lungul liniei orizontale. Aplicați diferite culori și text.
Salvați ca 'Nav.jpg' în 'Img' pliant.
În cele din urmă, pentru banda de fundal am folosit pur și simplu un instrument online numit Generatorul Stripe. Rezultatul arată astfel:
Puteți vedea setările mele aici.
Bineînțeles că ați putea să vă creați singur banda în Photoshop, dar de ce să nu folosiți în schimb un instrument web destul de mic :-)
Acum hai să notăm HTML-ul nostru.
cu meniu animat AcasădespreServiciisoluţiia lua legatura
Acest lucru este prety mult în conformitate cu planul nostru de joc explicat la Pasul 1.
Am adăugat un link către un fișier 'main.css' care urmează să fie creat și
Am adăugat, de asemenea, unele referințe la unele fișiere javascript. Deoarece fiecare element de navigare este unic, am dat fiecare element un ID.
Încă vom avea nevoie de un stil comun pentru fiecare dintre elementele de meniu, acest lucru ne va face ușor să gestionăm stilul în etapele ulterioare.
De asemenea, vom avea o casetă albă deasupra fiecărui element de navigare, când vom trece peste meniu sau dacă un element de meniu este selectat, așa că vom avea nevoie de altul
cu meniu animat AcasădespreServiciisoluţiia lua legatura
Salvați ca 'Index.html'. Până în acest moment avem această pagină HTML:
Să aplicăm un anumit stil de bază paginii Web. Vom începe prin definirea fundalului și adăugarea unei zone de antet.
corp background: url (... /img/body-bkg.jpg) repetați defilați; marja: 0; umplutura: 0; .containe r margine: 0pt auto; lățime: 950px; #header fundal: url (... /img/hdr-bkg.jpg) repeat-x defilare; height: 181px;
Salvați ca 'Main.css' în 'Css' pliant.
Acum avem ceva care arata ca:
Acum, să adăugăm stil la fiecare dintre elementele de meniu. Rețineți că dorim caseta albă din partea de sus a fiecărui element de meniu,
astfel încât poziția trebuie să fie stabilită la absolut. Adăugați următorul stil în fișierul nostru "main.css".
#navigation height: 60px; #home, #home div, #about, #about div, #servicii, #servicii div, #solutions, #solutions div, #contact, #contact div înălțime: 80px; Poziția: absolută; lățime: 97px; plutește la stânga; #home, #about, #services, #solutions, #contact background-image: url (... /img/nav.jpg); atașament de fundal: derulați; background-repeat: nu-repeta; top: 171px; #home background-position: 0px -25px; margin-left: 6px; #about background-position: -98px -25px; margin-left: 105px; #services background-position: -196px -25px; margin-left: 204px; #solutions background-position: -294px -25px; margin-left: 303px; #contact background-position: -392px -25px; margin-left: 402px; #home div, #about div, #servicii div, #solutions div, #contact div imagine-imagine: url (... /img/white.jpg); atașament de fundal: derulați; background-repeat: nu-repeta; pozitie fundal: 0px -60px;
Acum avem :
O problemă, legătura apare în partea de sus a elementelor din meniu, să o eliminăm cu o textură imensă - să o scoatem efectiv de pe ecran.
Adăugați acest lucru în foaia de stil.
.pri-nav a afișare: bloc; text-decoration: none; text-liniuță: -30000px;
Acum va arata astfel:
Încă mai avem o problemă, ne-ar plăcea ca meniul de navigare să apară sub umbra antetului. Putem realiza acest lucru prin modificarea stilului antetului nostru.
#header background: url (... /img/hdr-bkg.jpg) repetați-x defilați; height: 181px; Poziția: absolută; z-index: 100; / * asigurați că antetul se află în partea de sus a zonei de navigare * / top: 0px; stânga: 0px; lățime: 100%;
Acum, pentru că am folosit un fișier .png cu transparență, ar trebui să arate astfel:
Perfect! Să adăugăm conținutul astfel încât să putem ajunge la scenariul nostru de animație.
.conținut margin-top: 160px; # content-title fundal: url (... /img/content.jpg) parcurgere fără repetare; height: 323px; Poziția: absolută; lățime: 100%;
Mai întâi să descărcăm ultimul script jQuery și să îl plasăm în 'Js' pliant.
Animația este în esență o manipulare a stilului de poziție de fundal.
Din păcate, jQuery are o eroare în animarea stilului de poziționare a fundalului. Dar nu vă faceți griji! Alexander Farkas a creat un plugin care rezolvă această problemă.
Descărcați fișierul și redenumiți-l la jQuery-bp.js și păstrați-l în 'Js' pliant.
Este ceva ce trebuie să înțelegem înainte de a continua. Citez din documentația pluginului:
Datorită unor erori de browser (de ex., Firefox, trebuie să setați poziția inițială în fundal:
- Desigur, puteți realiza acest lucru și cu JavaScript (jQuery):
$ ('fundal'). css (backgroundPosition: '10px 20px');
Bine, acum că înțelegem asta, să începem. Vom stabili stilul poziției backgroud pentru fiecare element de la începutul scriptului nostru.
// id pentru fiecare dintre elementele noastre de meniu var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (funcție () setBkgPos ();); funcția setBkgPos () pentru (i = 0; i < nav.length; i++ ) $(nav[i]).css(backgroundPosition: i*(-98) + 'px -25px'); $(nav[i] + ' div').css( backgroundPosition: '0px -60px');
Salvați ca 'navigation.js' în 'Js' pliant.
Acum vom lega 3 evenimente pentru fiecare dintre elementele de meniu. Putem face acest lucru invocând funcția de legare.
$ (document) .ready (function () setBkgPos (); // obligați evenimentul să funcționeze aici pentru (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); );
Ori de câte ori un utilizator se deplasează peste elementul de navigare, scriptul nostru va apela funcția "mMouseOver".
Când utilizatorul se retrage din elementul de navigare, scriptul nostru va apela funcția 'mMouseOut'.
Și când utilizatorul face clic pe elementul de navigare, scriptul nostru va apela funcția "mClick".
Să creăm un "panou de poveste" pentru mouse-ul nostru peste animație.
Pe "Mouse Over":
Bine, să adăugăm aceste funcții sub scriptul anterior:
Accentsconagua
funcția _getHPos (id) pentru (i = 0; i < nav.length; i++ ) if ( '#' + id == nav[i] ) return i*(-98); return 0; function mMouseOver(e) $(this) // stop any animation that took place before this .stop() // step 1. change the image file and change the cursor .css(backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer') // step.2 move up the navigation item a bit .animate( backgroundPosition:'(' + _getHPos( this.id ) +'px -30px',"fast", // this section will be executed after the step.2 is done function() $(this) .children() // step. 3 move the white box down .animate(backgroundPosition:'(0px -40px)',20) // step 4. move the white box down .animate(backgroundPosition:'(0px -20px)',"fast"); $(this) // step 4. move the navigation item down .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)',"fast") // step 5. move the navigation item to its final position .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)',"fast"); // store the parent element id for later usage var parent = this; $(this) .children() // step 5. move the white box to its final position .animate( backgroundPosition:'(0px -45px)',"fast", // this section will be executed after the step.2 is done function() // step.6 change the image to its original image $(parent).css(backgroundImage: 'url(img/nav.jpg)'); ); ); Trebuie să explic câteva lucruri aici:
Acum sa terminat. Să creăm "tablou de poveste" pentru evenimentul "mouse out"
Pe "Mouse Out":
Codul:
funcția mMouseOut (e) $ (this) // opri orice animație care a avut loc înainte de acest .stop () // step.1 deplasați în jos elementul de navigare .animate (backgroundPosition: '(' + _getHPos (this.id) 'px 40px)', 'fast', // aceasta sectiune va fi executata dupa pasul 1. se face functie () // pas.2 alb caseta muta foarte repede $ (this) .children () animate ( backgroundPosition: '(0px 70px)', "rapid"); // pasul 3. mutați elementul de navigare în sus $ (this) .animate (backgroundPosition: '(' + _getHPos (this.id) ), "rapid", // această secțiune va fi executată după pasul 3. se face funcția () // pasul 4. mutați elementul de navigare din poziția inițială $ (acest) .animate (backgroundPosition: '( '+ _getHPos (this.id) +' px-25px) ', "rapid", // această secțiune va fi executată după pasul 4. se face funcția () // mutați cutia albă în poziția inițială, pentru următoarea animație $ (this) .children () css (backgroundPosition: '0px -60px');)) .css backgroundImage: 'url (img / nav.jpg)', "); Aproape acolo! Acum trebuie să facem față când un utilizator dă clic pe elementul de navigare.
funcția mClick (e) location.href = this.id;
Bineînțeles că puteți să vă îndreptați spre locația pe care o considerați potrivită aici. Această funcție va direcționa browserul dvs. la [current_url] / [navigation_id], astfel că pentru "home" va fi "[current_url] / home", pentru "about" acesta va fi "[current_url] / about".
Desigur, avem nevoie de un indicator când suntem deja pe o pagină. Pentru asta avem nevoie de o altă clasă CSS.
Vom numi acea clasă "activă". De exemplu, dacă suntem acum la domiciliu, fișierul HTML va deveni:
Acasă
Sau dacă suntem la "aproximativ" va deveni:
despre
si asa mai departe.
Deci, acum ideea este după ce o pagină este încărcată scriptul nostru va verifica pentru a vedea care element de navigare are clasa "activă".
Aplicăm apoi un efect de animație. Și trebuie să asigurăm că orice alte evenimente ("mouseover", "mouseout", "click") nu vor produce niciun efect de animație asupra acestui element "activ".
Pentru asta trebuie să schimbăm puțin codul nostru. Iată codul complet după modificări:
var () () () () () setBkgPos () var_site_url = "; var nav = ['#home', '#about', '#services', '#solutions', '#contact']; pentru (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); for ( i = 0; i < nav.length; i++ ) // element with 'active' class will start animation if ( $(nav[i]).get(0).className.indexOf('active') >= ) $ (Nav [i]) .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px-30px' (backgroundPosition: '(0px -40px)', 20) .animate (backgroundPosition: '(0px -20px)', "fast" '(' + _getHPos (nav [i]) + 'px 50px)', "rapid"). "($ (parental) .animate (backgroundPosition: '(0px-45px) ('+ _getHPos (parent.id) +' px 25px) ', "rapid"); $ (părinte) .css (backgroundImage:' url (img / nav.jpg) ; pauză; ); Și cu asta avem întregul meniu minunat.
Descărcați un ZIP al site-ului
Vizualizați o demonstrație!
