De asemenea, cine este interesat, puteți privi anterior. Utilizarea CSS, care este descrisă în articol -
Acum la afaceri. Ca și în ultimul articol, în primul rând, să scriem HTML. Codul meniului nostru. Codul este ca în acel articol, astfel încât să nu existe confuzie și a fost mai ușor de înțeles. Meniul cu două elemente și ambele au un submeniu.
Dacă aveți o astfel de linie sau similară, care a conectat deja biblioteca, atunci nu ar trebui să o faceți din nou.
În al doilea șir al scenariului, specificați IDI din meniul nostru. Dacă utilizați aceasta metoda În meniul propriu, schimbați în mod natural numele pe cont propriu. ÎN acest caz aceasta este - #Slow_nav..
De asemenea, puteți personaliza timpul de animație. Acest script pentru deschidere și închidere este de 400 de milisecunde, aceasta este de 0,4 secunde. Dacă doriți să vă schimbați la cea mai mare sau mai mică.
Ultimul pas, adăugați stiluri. Ele sunt foarte asemănătoare cu stilurile din articolul trecut, nu există proprietăți CSS. Animaţie.
#Slow_nav\u003e ul (lățime: 500px; margine: 25px auto 0;) #slow_nav\u003e ul\u003e li (stil de listă: niciun; afișaj: inline-bloc; poziție: rudă; padding: 0;) #slow_nav a (text- Decoration: Nici unul;) #slow_nav\u003e ul\u003e li\u003e A (font-dimensiune: 18px; padding: 5px; fundal-culoare: # 333; culoare: #fff;) #slow_nav li ul (poziție: absolut; stil de listă: Nici unul; aliniere text: centru; sus: 15px; font-dimensiune: 15px; stânga: 0; margine: 0; Padding: 0; Afișaj: Nici unul;) #slow_nav Li ul Li (fundal culoare: # 333; Border- Partea de jos: 1px Solid # 888;) #Slow_nav Li UL Li: Ultimul copil (fundul de frontieră: Nici unul;) #slow_nav li ul li a (padding: 5px 12px; Culoare: #FFF; Afișaj: bloc;) #slow_nav Li ul Li: hover (fundal-culoare: # 444; : Absolut; Lățime: 1px; Înălțime: 1px; Border: 5px solid transparent; Border-fundul-culoare: # 333; stânga: 10px; Top: -10px;)
A adăugat, de asemenea, în stiluri linie nouăCu care scriptul funcționează corect. Pentru element - #Slow_nav li ul. Proprietatea este definită afișaj: Nici unul;. Dacă nu este adăugată, meniul derulant va fi inițial vizibil și va dispărea numai după cursorul pe el. Toate celelalte stiluri ca articol anterior.
Ca o metodă anterioară, acest lucru poate fi aplicat nu numai la meniul autonom, ci și la același meniu dinamic care este creat de sistemul de management, cum ar fi WordPress.. Pentru a face acest lucru, trebuie să ajustați stilurile și toate. Adică, primul cod HTML nu trebuie să utilizeze numai stilurile. În stilurile de care aveți nevoie pentru a înlocui numele IYIDI #Slow_NAV pe ceea ce va fi cu dvs., bine, este posibil să corectați ceva în trifle. Nu mă voi opri în detaliu. Pentru fiecare caz, aveți nevoie de o abordare personală, așa că îmi pare rău 🙂
Asta-i tot, mulțumesc pentru atenția ta. 🙂.
În acest articol vom dezvolta un simplu meniu drop-down Folosind jQuery. Pentru început, uitați-vă la fișierul demo. Sperăm că chiar și puțin știți elementele de bază ale lui Jquery și CSS. Aspectele cheie ale creării acestui meniu derulant sunt utilizarea parametrilor CSS: Poziția, partea superioară, stânga, Z-Index.
Folosind acești parametri, putem fi siguri că meniul nostru va apărea exact sub legătura cu care a fost postat cursorul și cu siguranță va fi toate celelalte elemente. De asemenea, vom face meniul să se afișeze când se deplasează cursorul și va dispărea când cursorul este atribuit laterală. Pentru a implementa aceste evenimente, vom folosi jQuery: funcții de mouse-ul și mouseLleave. Și asta este tot ce trebuie să creăm un meniu derulant!
Demo fișier final rezultat și descărcare link
Codul HTML.
Consultați codul HTML al meniului derulant:
După cum puteți vedea, aici vom folosi listele dezordonate pentru a implementa elementele de meniu. Fiecare referință de meniu este atribuită clasa meniului derulant, iar meniul derulant în sine este acoperit de clasa de sub-link-uri. Numele de clasă vor fi folosite jQuery pentru a determina care meniu trebuie să afișați.
Cod CSS.
Consultați codul CSS:
/ * CSS pentru meniul derulant Start * /
Ul.
{
Lista de stil: Nici unul;
Padding: 0px;
Marja: 0px.
}
uL Li.
{
Afișaj: Inline;
Plutește la stânga;
}
ul Li A.
{
Culoare: #ffffff;
Fundal: # 990E00;
Marginea-dreapta: 5px;
Greutate font: Bold;
Dimensiune font: 12px;
Font-Family: Verdana;
Text-decorare: Nici unul;
Afișaj: bloc;
Lățime: 100px;
Înălțime: 25px;
Linie-înălțime: 25px;
Text-align: centru;
-Bidius-Raza de frontieră: 5px;
-Moz-frontieră-rază: 5px;
Frontieră: 1px solid # 560e00;
}
ul li a: hover
{
Culoare: #CCCCCC;
Fundal: # 560E00;
Greutate font: Bold;
Text-decorare: Nici unul;
Afișaj: bloc;
Lățime: 100px;
Text-align: centru;
-Bidius-Raza de frontieră: 5px;
-Moz-frontieră-rază: 5px;
Frontieră: 1px solid # 000000;
}
ul li.sublinks A.
{
Culoare: # 000000;
Fundal: # F6F6F6;
Border-Bottom: 1px solid #CCCCCCCCCC;
Greutatea fontului: normal;
Text-decorare: Nici unul;
Afișaj: bloc;
Lățime: 100px;
Text-align: centru;
Margin-top: 2px;
}
ul li.sublinks a: hover
{
Culoare: # 000000;
Fundal: # FFEC6;
Greutatea fontului: normal;
Text-decorare: Nici unul;
Afișaj: bloc;
Lățime: 100px;
Text-align: centru;
}
ul li.sublinks.
{
Afișaj: Nici unul;
}
/ * CSS pentru capătul meniului derulant * /
Cea mai mare parte a codului CSS este utilizată pentru a formata meniul (puteți da aspect Meniul la propria discreție), dar aici există și câteva puncte importante:
1 - Ștergerea filelor prin stilul de listă: Nici unul;
2 - Știm că listele sunt elemente bloc și sunt afișate întotdeauna într-o ordine verticală. Pentru a le face orizontal, le atașăm parametrul elementelor minuscule și le aliniați pe partea stângă utilizând codul:
Afișaj: Inline;
plutește la stânga;
3
- În mod implicit, legăturile sunt elemente mai mici. Ne reevaluăm în elemente bloc folosind afișajul: bloc (astfel încât să le putem întreba acum valoarea lățimii).
4 - Ascundeți toate meniurile prin:
Ul li.sublinks.
{
afișaj: Nici unul;
}
jquery.
Pregătiți anterior momentele în care meniurile derulante au fost implementate de dur cod JavaScript.În plus, a existat o grămadă de cod inutil. Dar astăzi tot ce avem nevoie este jquery:
$ (Funcție () (
Submenu.css ((
Poziție: "Absolut",
Zindex: 1000.
});
Submenu.Stop (). Slidente (300);
$ (this) .slideup (300);
});
});
});
Lucru foarte interesant și simplu. Să vă explicăm cum funcționează. Pentru a începe cu, ca de obicei, acoperim codul nostru la controlerul JQuery:
$ (Funcție () (
...
});
Codul nostru este activat când cursorul mouse-ului este invizibil (funcția MouseInter) la elementul la care este atribuit clasa meniului derulant ($ ("Dropdown"))). În cazul nostru, acesta este un link către meniu:
$ (Funcție () (
$ ("Dropdown"). MouseInter (funcția () (
........
});
});
Să ne asigurăm că ne ascundem (ascundeți ()) toate meniurile anterioare deschise înainte ca cursorul de șoarece să arunce următorul link:
$ ("sublincuri"). oprire (falsă, adevărată) .hide ();
Acordați atenție funcției Stop care ne ajută să afișăm doar un singur meniu derulant în momentul în care cursorul mouse-ului se deplasează de-a lungul diferitelor linkuri către meniu. Dacă nu folosim această funcție, fiecare meniu derulant va rămâne deschis până când deplasând pe deplin cursorul mouse-ului din meniu. Va crea niște căptușeli, așa că ar trebui să evităm acest lucru. Apoi, luăm meniul derulant deschis și atribuie o variabilă:
Var submeniu \u003d $ (acest) .Parent (). Următorul ();
Aceasta este ceea ce va fi în codul HTML:
Când cursorul mouse-ului este pe link-ul cu clasa derulantă, ne mutăm înapoi folosind părinte () și opriți la "Li", iar apoi cu următorul (), ne întoarcem să fim în meniul derulant dorit și "Li "Va fi deja cu o clasă de sublines (sublincuri). Astfel, JQuery ne face un proces pentru găsirea a ceea ce este afișat meniul derulant când cursorul mouse-ului se află pe o anumită legătură.
Submenu.css ((
poziție: "Absolut",
tOP: $ (Acest )Offset (). Top + $ (Acest) "() +" px ",
stânga: $ (this) .offset (). Stânga + "px",
zindex: 1000.
});
Codul este foarte important, deoarece ne garantează că meniul derulant este afișat exact sub o referință specifică. Dacă poziția este expusă la absolut, putem poziționa elementul în orice zonă a paginii noastre. Apoi, definim poziția superioară a link-ului la care cursorul se deplasează cu $ (Acest). FFFFset () astfel încât meniul să fie afișat exact referință. Ceva de genul că se face cu parametrul stâng. Apoi folosim indicele z pentru a fi încrezător că meniul nostru va fi afișat pe partea de sus a celorlalte elemente.
Submenu.Stop (). Slidente (300);
Desigur, puteți utiliza alte opțiuni pentru animație tip Fadein, animație cu propriile stiluri și așa mai departe.
Acum trebuie să distrageți atenția de la conceptul de afișare a meniului derulant și să o faceți. Avem nevoie de acest cod de extras:
Submeniu.Mouseleave (funcția () (
$ (this) .slideup (300);
});
Pentru a ascunde meniul derulant, folosim Slideup, Antonym la Slidengown. Luați în considerare faptul că submeniul este o variabilă pe care am creat-o pentru a determina meniul derulant specific.
Astfel, am avut o drop-down atractivă meniu pe jquery..
Pentru a scrie navigarea în sine sub forma unui meniu vertical derulant pe jQuery cu o listă de drop-down subcategorie, este necesar să se înțeleagă principiul funcționării acestui mecanism. Dar mai întâi vom analiza structura de navigație:
Navigare
După cum ați ghicit deja, meniul nostru derulant este construit pe baza listelor marcate. Când faceți clic pe cursorul mouse-ului pe etichetă
- testul 1.
- testul 2.
- testul 3.
- testul 4.
Dar cum întrebați? Da, totul este foarte simplu. Pentru a începe cu, hai să ne ocupăm de tabelul de stiluri din lista noastră de navigație, va arăta astfel:
Corp (fundal: RGB (244, 244, 244); Font-Face: Verdana; Greutate font: 100;) / * --- Navigare --- * / #menu (lățime: 200px; margine: 0; Padding: 2px;) #menu li (tip de stil de stil: Nici unul;) .menu (poziție: rudă; fundal: ciocolată; fundal: -moz-linear-gradient (partea de sus, RGB (198, 255, 242), # 2Ac4b3) ; Fundal: -webit-linear-gradient (partea de sus, RGB (198, 255, 242), fundal: -O-Linear-Gradient (top, RGB (198, 255, 242), # 2Ac4b3); frontieră : 1px solid # 2Ac4b3;) Top, RGB (230, 230, 230), # 0cfab); fundal: -O-Linear-Gradient (partea de sus, RGB (230, 230, 230), # 0cbfab);) .menu span (lățime: 11px; înălțime: 11px; Afișaj: Bloc: Absolut; Top: 8px; dreapta: 10px; cursor: pointer;) .menu ul (lățime: 150px; margine: 0; Padding: 1px; poziție: absolut; Top: -1px; stânga: 198px;) .menu ul Li (fundal: ciocolată; fundal: -Moz-linear-gradient (partea de sus, RGB (198, 255, 242), # 2AC4B3); Fundal: -webit-linear-gradient (partea de sus, RGB (198, 255, 242), # 2AC4B3); Fundal: -o-linear-gradient (partea de sus, RGB (198, 255, 242), # 2AC4B3); Frontieră: 1px solid #fffff; ) 230, 230, 230), # 0cfab); fundal: -O-Linear-Gradient (partea de sus, RGB (230, 230, 230), # 0cbfab);) .Menu a (padding: 5px; afișaj: bloc; text- Decorare: Nici unul; Culoare: alb;) .menu a: hover (culoare: alb;) / * --- capătul --- * /
Din foaia de stil, se poate observa că lista derulantă inițial nu este ascunsă, dar în acest moment vom fi corectați folosind:
$ (Document) .Ready (Funcție () ($ ("Meniu ul"). Ascunde (); $ ("meniu span"). CSS ("fundal", "URL (" Down.png ")"); $ ("Meniu Li"). Hover (Funcție () ($) .children ("ul"). Afișați (); / * echivalent $ ("ul", acest) .show (); * / $ ( acest lucru) .find ("span"). CSS ("fundal", "URL (" dreapta.png ")"); / * echivalent $ ("span", this) Dreapta.png ")"); *); * /), funcția () (acest lucru) .children ("ul"). Ascunde (); / * echivalent $ ("ul", acest) $ (this) .find ("span"). CSS ("fundal", "URL (" Down.png ")"); / * $ ("span", this) "Down.png") "); * /))))
Acum vom analiza codul jQuery al meniului derulant, pentru că Poate că cineva nu va fi complet înțeles. La început, se prescrie următoarea construcție:
$ (Document) .rea (funcția () ())
Comenzile prescrise care trebuie efectuate după descărcarea completă a paginii. Acest lucru se face astfel încât să nu existe diferite greșeli, dacă este imposibil să se găsească niciun obiect datorită faptului că acesta este un trite încă încărcat.
$ ("Meniu ul"). Ascundeți ();
Ce înseamnă această intrare? Designul "$ ()" vă permite să selectați elemente. În consecință, la început, trebuie să ascundem lista derulantă. Luăm designul "$ ()" și scrieți în el obiectul care vă interesează. În cazul nostru, acest obiect va fi listă Cu meniul de clasă ". Apoi, prescriem metoda "Ascundere ()", care vă permite să ascundeți obiectul care vă interesează.
$ ("Durată meniu"). CSS ("fundal", "URL (" Down.png ")");
Ce face ea? Ea caută etichetă element parental. Care i se atribuie "meniul" și, utilizând metoda "CSS", "URL (" Down.png ")") ", alocarea URL-ului" stilului "de fundal" ("Down.png") "." Down.png "Este o pictogramă care arată că lista se poate deschide.
Apoi, există un design, care va dezvălui lista noastră, se pare că aceasta:
$ ("# Meniul Li"). Hover (FUNCȚIA () ($ (Aceasta) .children ("ul"). Afișați (); $ (acest) .find ("span"). CSS ("fundal", " Adresa URL ("dreapta.png") "););), funcția () ($ (this) .children (" ul "). Ascunde (); $ (this) .find (" span "). CSS (" fundal " , "URL (" Downg ")");)
Căutăm o etichetă la elementul părinte al căruia i se atribuie ID \u003d "meniu". Apoi este metoda "hover" și în paranteze două funcții. Prima funcție va fi efectuată atunci când deplasați cursorul mouse-ului, iar al doilea care va fi executat dacă cursorul mouse-ului părăsește elementul care vă interesează.
Prima funcție este scrisă:
$ (this) .children ("ul"). Afișați (); $ (aceasta) .find ("span"). CSS ("fundal", "URL (" dreapta.png ")");
Designul "$ (acest)" înseamnă că suntem interesați de acel element la care suntem acest moment A adus (aceasta din Anglia. Acest). Și am adus eticheta
După aceea, eticheta Căutăm descendenți, și anume: etichetă și are un fundal la o altă icoană.
După aceea, funcția este prescrisă, ceea ce face totul, așa cum a fost inițial, după ce cursorul mouse-ului părăsește elementul de listă:
Funcție () ($ (this) .children ("ul"). Ascunde (); $ (this) .find ("span"). CSS ("fundal", "URL (" Downg "));););
Pentru a face codul scris pe jQuery și meniul nostru derulant lucrat corect, trebuie să descărcați biblioteca de la jquery.com și să le conectați, vorbind după eticheta de deschidere
Linia.Asta este! În concluzie, vreau să menționez că, dacă site-ul dvs. este destul de distractiv, atunci este posibil ca scriptul să înceapă prea târziu (site-ul se va încărca mult timp), iar utilizatorii vor vedea cât de întâi dezvăluie complet, dar numai apoi Asta vezi, foarte urât. Prin urmare, este necesar să suportăm toate comenzile jQuery pentru acest design: "$ (Document) .Ready (Funcție () ())". Va arăta așa:
$ (Document) .Ready (funcția () ()) $ ("meniul ul"). Ascundeți (); $ ("Durată meniu"). CSS ("fundal", "URL (" Down.png ")"); $ ("# Meniu Li"). Hover (Funcție () ("ul). Afișați (); $ (acest) .find (" span "). CSS (" fundal "," URL ("dreapta.png") ");), Funcția () ($ (this) .children (" ul "). Ascunde (); $ (acest) .find (" span "). CSS (" fundal "," URL ("Downg") ");))
Conectarea scenariului nostru trebuie transferat de la etichetă
La cea mai ușoară, în fața etichetei de închidereSau puteți conecta scriptul imediat după lista marcată.(Scăderea: 314)
Cu ajutorul jquery-clasic, articolele de pe acest subiect sunt scrise. Am încercat puțin complica sarcina, adăugând capacitatea de a rămâne partiții la meniu deschisă (sau închisă, în funcție de selecția utilizatorului) atunci când treceți prin intermediul site-ului.
Pentru a rezolva această sarcină, am decis să folosesc pluginul Cookie JQuery. Avantajul acestui plugin este că operația este efectuată pe partea clientului, care, la rândul său, reduce sarcina de pe server. Minus- Dacă utilizatorul este dezactivat cu JS, pluginul nu va funcționa. Dar această opțiune Nu consider, pentru că atunci întregul punct al meniului derulant dispare. Deci, să începem.
În primul rând, trebuie să conectăm Cadrul JQuery și Plugin Cookie JQuery:
Cod: HTML.
Mai departe. Va arăta ca o listă simplă, nimic supranatural. Singura notă că în etichetă
Trebuie să fie titlul, când faceți clic pe ce meniu va cădea:
Cod: HTML.
Ei bine, atât de nedefinit. Acum este cel mai interesant. În codul voi adăuga un pic de comentarii, pentru a fi aproximativ ușor de înțeles, Chopach
Cod: JS.
$ (document) .Ready (funcția () (
Dacă ($. Cookie ("Num_Open_ul")) (// verificat dacă există intrarea în cookie-uri
dacă ($. Cookie ("Num_Open")! \u003d 0) (// și această înregistrare nu este egală cu 0
VAR NUMBER_EQ \u003d PARSEINT ($. Cookie ("Num_Open_ul") - 1);
$ ("Navigation_body"). eq (număr_eq) .show (). "() prelungit (" # navigare h2.naviging_head: primul ")
}
};
$ ("# navigare h2.naviging_head"). Faceți clic pe (Funcție () (// Când faceți clic, această funcție va funcționa
Dacă (! $ (Aceasta) .Next () este (": vizibil")) (
$ ("div.navigation_body"). frați ("div.naviging_body"). Slideup (500); // Dacă alții s-au deschis, au închis totul, cu excepția curentului
}
$ (this) .ext ("div.navigation_body"). Slideoggle (500) .siblings ("div.navigation_body"). Slideup (500);
$ (this) .toggleclass ("activ_navigație") // deschide clasa adăugată pentru a schimba stilul
Settimeout (FNCOOKIE, 600); // Înregistrați în modul cookie cu o întârziere, astfel încât scriptul să fi reușit să finalizeze lucrarea (500 ms-viteză, întârziere, 600ms)
});
Funcția FNCookie () (// funcția de înregistrare în sine
var numer_open_ul \u003d 0;
var i \u003d 0;
$ ("div.naviging_body"). Fiecare (funcție () (
I ++;
dacă ($ (acest lucru) .is (": vizibil")) (
Numere_open_ul \u003d i;
}
$ .Cookie ("Num_open_ul", număr_open_ul, (expiră: 3, calea: "/")); // Stocați 3 zile pentru întregul site.
});
}
});
Acesta este, acum, dacă utilizatorul a deschis meniul, a părăsit site-ul și a continuat din nou după câteva zile, meniul este încă deschis la acesta deschis.
Ei bine, în cele din urmă, avem un cod de bare mic: de fapt, cSS-stiluri. Chiar îți faci gustul, în exemplul pe care l-am luat design gata cu unul dintre proiecte
Cod: CSS.
#Navigation (
Marja: 80px auto;
Lățime: 250px;
}
#Navigation h2, #navigation h2.naviging_head (
Font-dimensiune: 18px;
Greutate font: mai îndrăzneț;
Culoare de fundal: # FFB6C1;
Imagine de fundal: -Webkit-Gradient (liniar, 50% 0,50% 100%, Color-Stop (0%, # FFE9E9), Color-STOP (100%, # FFB6C1));
Imagine de fundal: -Webkit-Linear-Gradient (# FFE9E9, # FFB6C1);
Imagine de fundal: -moz-linear-gradient (# FFE9E9, # FFB6C1);
Imagine de fundal: -O-Linear-Gradient (# FFE9E9, # FFB6C1);
Imagine de fundal: Gradient linear (# FFE9E9, # FFB6C1);
Padding: 5px 3px 6px 3px;
Marja: Auto;
Poziție: rudă;
}
#Navigation h2.naviging_head: După (
Poziție: absolută;
Dreapta: 5px;
Culoare: # 550000;
Conținut: "CSSB";
}
#Navigation H2: hover, #navigation h2.naviging_head: hover (
Cursor: pointer;
}
.Active_navigation (
Imagine de fundal: -Webkit-Gradient (liniar, 50% 0,50% 100%, Color-Stop (0%, # FFB6C1), Color-Stop (100%, # FFE9E9))! IMPORTANT;
Imagine de fundal: -Webkit-Linear-Gradient (# FFB6C1, # FFE9E9)! Important;
Imagine de fundal: -moz-linear-gradient (# FFB6C1, # FFE9E9)! Important;
Imaginea de fundal: -O-Linear-Gradient (# FFB6C1, # FFE9E9)! Important;
Imagine de fundal: Gradient linear (# FFB6C1, # FFE9E9)! Important;
}
.Active_navigație: După (
Poziție: absolută;
Dreapta: 5px;
Conținut: "CSSD"! Important;
}
.Navibation_body (
Afișaj: Nici unul;
}
#Navigație ul (
Marja: 0;
Padding: 0;
Tipul stilului de stil: Nici unul;
}
* HTML #Navigation UL Li (
Înălțime: 1%;
}
#Navigație div.naviging_body ul li (
Margin-stânga: 10px;
}
#Navigație a (
Font-Family: "Times New Roman";
Afișaj: bloc;
Culoare: # 918871;
Padding: 3px;
Culoare de fundal: # FFE3E0;
Bordul de frontieră: 1px solid #ffff;
Text-decorare: Nici unul;
}
#Vavigație A: Hover (
Culoare: # 585858;
Culoare de fundal: # FFB6CC;
}
Dacă cineva a atras atenția, aici am încercat să folosesc conținutul proprietății: +/- cu închis / deschideți meniulDar puteți adăuga o imagine sau orice alt design. Vedeți un exemplu de ceea ce am făcut, puteți
Ca întotdeauna, sunt gata să ascult întrebări și să încerc să le răspund. Toate cele bune, toate cele bune.
În această lecție, vă vom arăta cum să creați un meniu derulant lateral pentru o navigare simplă pe site. Un astfel de meniu este o tendință populară în designul web modern. Pe multe site-uri este utilizat acest tip de meniu. Cu aceasta, puteți scăpa de haosul pe paginile proiectului, îl puteți citi mai ușor, concentrându-se atenția utilizatorilor pe conținutul principal.
Aceasta este o modalitate excelentă de a obține minimalismul fără a distrage factorii. Astăzi vom crea un astfel de meniu.
Pentru a crea un meniu de navigare, haideți să citiți mai întâi setările:
Mai întâi trebuie să descărcați Normize.Css și să configurați stilurile implicite de browser, asigurați-vă că meniul arată același în toate browserele. Pentru a afișa săgeata înainte de elementul de meniu cu sub-clauze, vom folosi Fontawesome. Pentru a comuta clasele din meniu, încărcați jQuery și mutați întregul cod JQuery pentru utilizator în Script.js. Linkul din urmă este tabelul principal pentru proiectul web.
Icon Hamburger.
Pictograma Hamburger este un atribut comun al navigării pe site. Adesea este creat folosind un font de pictograme, cum ar fi fontawesome, dar în această lecție vom adăuga o anumită animație și, prin urmare, o vom crea de la zero. Pictograma Hamburger este o etichetă de vârf care conține trei clase div, afișate sub formă de benzi orizontale.
Stilurile arată astfel:
Butonul de comutare (poziție: fixă; lățime: 44px; înălțime: 40px; padding: 4px; tranziție: .25s; z-index: 15;) .Toggle-buton: hover (cursor: pointer;) .Toggle-buton .menu -Bar (poziția: absolută; Raza de frontieră: 2px; lățime: 80%; tranziție: .5S;) .Toggle-buton .menu-bar-top (margine: 4px solid # 555; Nimic; Top: 0;) .Toggle-buton .menu-bar-mijloc (înălțime: 4px; fundal-culoare: # 555; margine-top: 7px; margine-fund: 7px; Top: 4px;) -Bottom (granița: 4px solid # 555; frontieră-top: nici unul; sus: 22px;) .button-deschis .Menu-bar-top (transformare: rotat (45DEG) traduce (8px, 8px); tranziție: ). Button-deschis .Menu-bar-mijloc (Transformare: Traduceți (230px); Tranziția: .1S ușurință; Opacitate: 0;) .button-deschis .Menu-bar-fund (transformare: rotire (-45deg) Traduceți (8px, -7px); tranziție: .5S;)
Pictograma are o poziție fixă \u200b\u200bși nu o schimbă atunci când derulează pagina. De asemenea, are indicele Z, ceea ce înseamnă că va fi întotdeauna peste alte elemente. Constă din trei bare, fiecare dintre ele împărtășește alte stiluri. Prin urmare, vom deplasa fiecare bar la clasa. Amenu-bar. Restul stilurilor se mișcă clase separate. Magic apare când adăugăm o altă clasă în eticheta de span, care este deschisă. Adăugăm la folosind jQuery. În felul următor:
$ (Document) .Ready (FUNCȚIA () (VAR $ TOGGGUTTON \u003d $ ("Toggle-buton"); $ togglebutton.on ("clic", funcția () ($ (Acest) .toggleclass ("buton-deschis" );));)););
Pentru cei care nu sunt familiarizați cu jQuery - inițializăm variabila cu $ ToggleButton, care conține pictograma noastră. O salvăm într-o variabilă fără a fi nevoie folosind JavaScript. Apoi creăm un ascultător de evenimente, care ia în considerare clicurile pe pictogramă. De fiecare dată când utilizatorul face clic pe pictograma Hamburger, ascultătorul evenimentului lansează funcția TogleClass (), care comută clasa.button-deschis.
Când se adaugă clasa.button-deschis, îl putem folosi pentru a schimba metodele de afișare a elementelor. Folosim funcțiile CSS3 traducă () și rotiți (), astfel încât benzile superioare și inferioare să rotească 45 de grade, iar bara de mijloc sa mutat spre dreapta și a dispărut. Iată ce animație poate fi configurată:
Rularea meniului de navigare
Acum că aveți o pictogramă de hamburger, să o facem utilă și să creați un meniu drop-down când faceți clic pe acesta. Acesta este modul în care arată marcajul meniului:
Acum nu vom locui pe fiecare stil pentru acest meniu, în schimb, concentrați-vă pe mai multe momente importante. În primul rând, este div și class.menu-folie. Uită-te la stilurile lui:
Meniu-folie (fundal-culoare: # 6968AB; Poziție: Fixed; Top: 0; înălțime: 100%; lățime: 280px; margine-stânga: -280px; font-dimensiune: 1em; Font-greutate: 700; Overflow: Auto ; tranziție: .25S; Z-Index: 10;)
Poziția este fixă, deci atunci când derularea paginii meniului rămâne întotdeauna în aceeași poziție. Înălțimea de 100% permite meniului să ocupe toate spațiul vertical de pe pagină. Rețineți că câmpul marginal are un număr negativ egal cu lățimea meniului. Aceasta înseamnă că meniul va dispărea din fereastra de vizualizare. Pentru a face din nou vizibilă, creăm o altă clasă pentru JQUERY. Al nostru fișierul JavaScript. Va arăta astfel:
$ (Document) .Ready (Funcție () (var cu togigebutton \u003d $ ("comutați-butoane"), $ MENUWRAP \u003d $ ("Meniu-wrap"); $ toglebutton.on ("faceți clic", funcție () ($ (this) .toggleclass ("buton-deschis"); $ MENUWRAP.Toggleclass ("Menu-show");));));)););
Adăugați o altă variabilă $ MENUWRAP care conține coaja de meniu. Utilizați același manipulator de evenimente pe care l-am creat mai devreme. Numai de data aceasta trecem două clase: unul pentru buton și unul pentru carcasa meniului. Valoarea câmpului stâng al clasei.Menu-show este 0, va adăuga efectul umbrei.
Meniu-show (margine-stânga: 0; Box-umbra: 4px 2px 15px 1px # b9adad;)
Submeniul și legăturile
Este posibil să observați că într-unul din elementele de listă există o clasă.menu-elemente-has-copii, care conține un submeniu. În plus, eticheta de span este plasată imediat sub link-ul cu clasa.sidebar-Menu-Arrow.
span are :: după pseudo-element și conține o săgeată fontawesome. În mod implicit, submeniul este ascuns și va fi vizibil numai când este apăsat pe săgeată. Iată cum putem face cu jQuery:
$ (Document) .Ready (FUNCȚIA () (VAR $ BARDBRARK \u003d $ ("Sidebar-Menu-Arrow"); $ Sidebararw.Click (Funcție () ($ (this) .Nextoggle (300);) );));
Când facem clic pe săgeată, numim o funcție care, la rândul său, este îndreptată spre următorul element imediat după spargere (în cazul nostru este un submeniu) și îl face vizibil. Funcția pe care o folosim este slidetoggle. Determină că elementul să apară și să dispară. Funcția din exemplul nostru are un parametru - durata animației.
Elementele de meniu în exemplul au un efect de hover. Se creează folosind: după pseudo-element. Codul arată astfel:
Meniu-Sidebar Li\u003e A :: după (Conținut: ", Afișaj: Block, Înălțime: 0,15em; Poziție: Absolut; Top: 100%; Lățime: 102%; stânga: 50%; Transformare: Traducere (-50%) ; Imagine de fundal: gradient liniar (la dreapta, transparent 50,3%, # FFFFA3B 50,3%); tranziție: poziția de fundal .2s .1s ușurință; fundal-dimensiune: 200% auto;) .Menu-sidebar Li\u003e R: Hover :: după (poziția de fundal: -100% 0;)
:: După ce Pseudo-Element conține elementul de nivel al blocului în partea de jos a fiecărei legături cu o lățime întreagă și o înălțime de 0,15em. Arată toate acestea ca o subliniere. Particularitatea este că nu doar folosim culoarea de fundal la linie, folosim funcția Linear-Gradient () pe imaginea de fundal. Deși această caracteristică este concepută pentru a crea gradienți de culoare, putem schimba culoarea prin specificarea interesului dorit.
Meniu-sidebar Li\u003e A :: După (la dreapta, transparent 50,3%, # FFFFA3B 50,3%);););););
Jumătate linie este transparentă aici, iar a doua jumătate este galbenă. Făcând fundalul fundalului 200%, vom dubla lățimea blocului nostru. Acum, partea transparentă ia întreaga lățime de referință, iar partea galbenă se deplasează spre stânga și devine invizibilă. Modificăm poziția fundalului atunci când plimbăm pe -100%. Acum, partea galbenă devine vizibilă și transparentă - ascunsă.
În loc de o parte transparentă, puteți utiliza orice altă culoare. De asemenea, puteți experimenta gradienți.
Fiecare dintre elementele considerate de noi lucrează în ansamblu. Puteți crea un astfel de meniu utilizând orice site de proiectare din colecția TemplateMonster. După cum puteți vedea, faceți mai ușor decât vă puteți imagina. Mult noroc în crearea de site-uri profesionale și ușor de utilizat!
