Share
După cum știți, există o mulțime de biblioteci javascript concurente în aceste zile. Deși prefer jQuery, mi-a plăcut mereu modul în care a funcționat meniul de pe MooTools. Deci, în acest tutorial vom recrea același efect ... dar o vom face în jQuery!
Să începem prin scrierea codului HTML necesar pentru a crea o navigație verticală simplă. Pentru structură, așa cum probabil ați ghicit, vom folosi o listă neordonată cu numele de identificare „Alunecare-navigare"De asemenea, vom adăuga câteva linkuri și vom da fiecare element de listă numele clasei "-Element de alunecare".
De asemenea, voi adăuga un element de titlu. Acesta este un lucru util pentru a face cât mai multe bloguri WordPress, de exemplu, au elemente de titlu în navigarea lor laterală (de exemplu, "Arhive"). Deci ar arata cam asa:
Acum, să creăm un document HTML în care să putem pune munca pe care tocmai am făcut-o. Creați un fișier HTML nou și numiți-l demo.html. Apoi deschideți acest fișier cu editorul dvs. de text preferat și introduceți următorul cod:
Efectul de navigare Utilizând jQuery
Titlul navigării
- Linkul 1
- Link 2
- Legătura 3
- Link 4
- Link 5
Există câteva lucruri de reținut aici:
Acum, că avem fișierul HTML etichetat și de lucru, să adăugăm câteva stiluri. Rețineți că documentul HTML indică un fișier CSS numit styles.css. Deci, să începem prin crearea unui fișier numit styles.css și salvând-l în același director în care trăiește documentul nostru HTML. Așa cum am făcut în pasul anterior, deschideți acest fișier cu editorul dvs. de text preferat și introduceți următorul cod:
corp marja: 0; umplutura: 0; fundal: # 1d1d1d; font-family: "Lucida Grande", Verdana, sans-serif; font-size: 100%; ul # culisare-navigare style-list: none; font-size: .75em; margine: 30px 0; ul # alunecare-navigare li.sliding-element h3, ul # alunecare navigare li.sliding-element a display: block; lățime: 150px; padding: 5px 15px; marja: 0; margin-bottom: 5px; ul # alunecare-navigare li.sliding-element h3 culoare: #fff; fundal: # 333; frontieră: 1px solid # 1a1a1a; font-weight: normal; ul # alunecare navigație li.sliding-element a culoare: # 999; fundal: # 222; frontieră: 1px solid # 1a1a1a; text-decoration: nici unul; ul # alunecare-navigare li.sliding-element a: hover culoare: # ffff66;
În acest moment, pagina dvs. demo.html ar trebui să arate ceva de genul:
Deci, este timpul să începeți să utilizați jQuery. Dar, înainte de a începe, trebuie să facem câteva lucruri:
Acesta este fișierul dvs. HTML
ar trebui să arate ca acum:Efectul de navigare Utilizând jQuery
Acum, vom crea funcția care va face toată ridicarea "grea" pentru ca efectul de alunecare să funcționeze. Această funcție va avea cinci parametri (navigare_id, pad_out, pad_in, timp și multiplicator) și le va fi utilizată după cum urmează:
Deci, deschideți fișierul dvs. sliding_effect.js și introduceți următorul cod:
funcția slide (navigare_id, pad_out, pad_in, timp, multiplicator) // creează căile țintă var list_elements = navigation_id + "li.sliding-element"; var link_elements = lista_elemente + "a"; // iniția cronometrul folosit pentru animația de alunecare var timer = 0; // creează animația diapozitivelor pentru toate elementele listă $ (list_elements) .each (funcția (i) // marginea stânga = - [[lățimea elementului] + [elementul vertical complet al elementului]) $ (acest) .css marginea-stânga "," - 180px "); // actualizează temporizatorul temporizat = (timer * multiplicator + timp); $ (acest) .animate (marginleft:" 0 " (marginLeft: "15px", cronometru); $ (acest) .animate (marginLeft: "0", timer);); // creează efectul hover-slide pentru toate elementele de legătură $ (link_elements). fiecare (funcția (i) $ (this) .hover (funcția () $ (this) .animate (paddingLeft: ;, funcția () $ (aceasta) .animate (paddingLeft: pad_in, 150);););
Tot ce trebuie să facem pentru a declanșa scriptul este să apelați funcția când pagina a fost încărcată. Există două locuri pentru a pune următorul fragment de cod. Poate fi scrisă în interiorul fișierului sliding_effect.js (am ales această opțiune pentru acest tutorial) sau am sunat în HTML utilizând
De Bedrich Rios
Observați că am adăugat imaginea în interiorul elementului "navigație-bloc" și îi dau un ID numit "ascunde". De asemenea, am adăugat un element de titlu și o subtitlu. Acum adăugăm un pic de CSS suplimentar în fișierul nostru styles.css după cum urmează:
h2 culoare: # 999; marginea inferioară: 0; margin-left: 13px; fundal: url (navigation.jpg) no-repeat; înălțime: 40px; h2 span afișare: niciunul; p culoare: # ffff66; margin-top: .5em; font-size: .75em; padding-left: 15px; # navigație-bloc poziție: relativă; top: 200px; stânga: 200px; #hide poziție: absolută; top: 30px; stânga: -190px;
Deci, primul în
De asemenea, observați că elementul "navigație-bloc" are acum o poziție relativă, astfel încât să putem muta imaginea "ascunde" în stânga. Acest lucru va face ca filele să apară de sub ea.
În cele din urmă, pentru a da un pic de finisaj tab-uri am adăugat o imagine subtil de fundal, care arată ca umbrirea de genul:
ul # alunecare de navigație li.sliding-element h3 culoare: #fff; fundal: # 333 url (heading_bg.jpg) repeat-y; font-weight: normal;
Și am terminat!
Vizualizați efectul final
Descărcați HTML / Imagini / JS
Accentsconagua