Takođe koji su zainteresovani, možete pogledati prethodni put sa koristeći CSS.To je opisano u članku -
Sada poslu. Kao u poslednjem članku, pre svega, pišemo Html Kodeks našeg menija. Kodeks je kao u tom članku, tako da nema konfuzije i bila je razumljiva. Meni sa dva predmeta i oba ima podmeni.
Ako imate takvu liniju ili slično, što je već ranije povezalo biblioteku, onda to ne biste trebali učiniti ponovo.
U drugom nizu skripte, odredite IDI našeg menija. Ako koristite ova metoda U svoj vlastiti meni, a zatim prirodno promijenite ime u svoje. U ovaj slučaj ovo je - #Slow_nav..
Takođe možete prilagoditi vrijeme animacije. Ova scenarija za otvaranje i zatvaranje je 400 milisekundi, ovo je 0,4 sekunde. Ako se želite promijeniti u veći ili manji.
Posljednji korak, dodajte stilove. Vrlo su slični stilovima iz prošlog članka, nema cSS svojstva Animacija.
#Slow_nav\u003e ul (širina: 500px; margina: 25px auto 0;) #slow_nav\u003e ul\u003e li (lista stila: none; prikaz: relativna; obloga: 0) #slow_nav a (tekst- Dekoracija: Nema;) #Slow_nav\u003e ul\u003e li\u003e a (veličina fonta: 18px; jastuk: 5px; boja: #fff;) #slow_nav li ul (položaj: apsolut; list-stil: nijedan; Poravnavanje teksta; TOP: 15px; Veličina fonta: 15px; levo: 0; marža: 0; zaslon: nema;) #slow_nav li ul li (boja - boju: # 333; Dno: 1px Solid # 888;) #Slow_nav li ul li: Last-dijete (obrubno dno: nema;) #slow_nav li ul li a (jastuk: 5px 12px; blok;) #slow_nav li ul LI: HOVER (boja pozadine: # 444;) #Slow_nav li ul li: prvo dijete (margin-top: 25px; položaj: relativna;) #slow_nav li ul li: prvo dijete: prije (sadržaj: "; : Apsolutna; širina: 1px; visina: 1px; obrub: 5px solidna prozirna; bobola-dna boja: # 333; lijevo: 10px; vrh: -10px;)
Takođe dodan u stilove nova linijaSa kojom skripta radi pravilno. Za element - #Slow_nav li ul. Nekretnina je definirana prikaz: Nema;. Ako se ne doda, padajućeg izbornika bit će u početku vidljiv i nestao tek nakon kursora na njemu. Svi ostali stilovi kao prethodni članak.
Kao i prošla metoda, to se može primijeniti ne samo u samostalno meni, već i na isti dinamički izbornik koji stvara sistem upravljanja, kao što su Wordpress.. Da biste to učinili, morate prilagoditi stilove i sve. To jest, prvi HTML kod ne treba koristiti, samo stilovi. U stilovima morate zamijeniti ime Iyidi #slow_nav na ono što će biti s vama, pa, moguće je ispraviti nešto u sitnicama. Neću se detaljno zaustaviti. Za svaki slučaj potreban vam je lični pristup, pa mi je žao 🙂
To je sve, hvala na pažnji. 🙂
U ovom ćemo članku razviti jednostavan padajući izbornik Koristeći jQuery. Za početak pogledajte demo datoteku. Nadamo se da čak i malo znate osnove jQuery i CSS-a. Ključni aspekti kreiranja ovog padajućeg izbornika su upotreba CSS-a: položaj, gornji, lijevi, z-indeksni parametri.
Koristeći ove parametre možemo biti sigurni da će se naš izbornik pojaviti tačno ispod veze na koju je pokupio kursor, a definitivno će biti svi ostali elementi. Napravit ćemo i meni da se prikaže prilikom lebdeći kursora i nestao kada je kursor dodijeljen na stranu. Da bismo implementirali ove događaje, koristit ćemo jQuery: Funkcije mišem i mouseleave. I to je sve što trebamo stvoriti padajući izbornik!
Demo datoteka konačni rezultat i link preuzimanja
HTML kod
Pogledajte HTML kod padajućeg izbornika:
Kao što vidite, ovdje ćemo koristiti neuređene liste za implementaciju stavki izbornika. Svaka referenca menija dodjeljuje se klasa padajućeg izbornika, a padajućeg izbornika je pokrivena klasom pod-veze. Nazivi klase koristit će se jQuery da bi se odredio koji je izbornik potreban za prikaz.
CSS kod
Pogledajte CSS kod:
/ * CSS za padajući meni Start * /
Ul
{
Stil liste: Nema;
Padding: 0px;
Margina: 0px
}
ul li
{
Prikaz: Inline;
Plovak: lijevo;
}
ul lii A.
{
Boja: #ffffff;
Pozadina: # 990E00;
Marža - desno: 5px;
Težina fonta: podebljana;
Veličina fonta: 12px;
Porodica fonta: verdana;
Dekoracija teksta: Nema;
Prikaz: blok;
Širina: 100px;
Visina: 25px;
Visina linije: 25px;
Poravnavanje teksta: Centar;
-Webkit-granični radijus: 5px;
-Moz-granični radijus: 5px;
Granica: 1px Solid # 560E00;
}
ul li a: lebdjeti
{
Boja: #cccccc;
Pozadina: # 560E00;
Težina fonta: podebljana;
Dekoracija teksta: Nema;
Prikaz: blok;
Širina: 100px;
Poravnavanje teksta: Centar;
-Webkit-granični radijus: 5px;
-Moz-granični radijus: 5px;
Granica: 1px Solid # 000000;
}
ul li.sublinks A.
{
Boja: # 000000;
Pozadina: # F6F6F6;
Grobno dno: 1px Solid #cccccc;
Težina fonta: Normalno;
Dekoracija teksta: Nema;
Prikaz: blok;
Širina: 100px;
Poravnavanje teksta: Centar;
Margin-top: 2px;
}
ul li.sublinks a: lebdjeti
{
Boja: # 000000;
Pozadina: # FFEFC6;
Težina fonta: Normalno;
Dekoracija teksta: Nema;
Prikaz: blok;
Širina: 100px;
Poravnavanje teksta: Centar;
}
ul li.sublinks.
{
Prikaz: Nema;
}
/ * CSS za padajući izbornik kraj * /
Većina CSS koda koristi se za formatiranje izbornika (možete dati izgled Jelovnik po vlastitom nahođenju), ali ovdje postoje i neke važne točke:
1 - Brisanje kartica po listi stilom: nema;
2 - Znamo da su liste blokirani elementi i uvijek se prikazuju u vertikalnom redoslijedu. Da bismo ih napravili vodoravno, dodajemo ih parametar malih elemenata i poravnali su ih na lijevoj strani pomoću koda:
Prikaz: Inline;
plovak: levo;
3
- Po defaultu, veze su malih elemenata. Volimo ih u blok elemente koristeći zaslon: blok (tako da im sada možemo postaviti vrijednost širine).
4 - Sakrij sve menije kroz:
Ul li.sublinks.
{
prikaz: Nema;
}
jQuery.
Pripremiti dosadašnja vremena kada su padajući izbornici provedeni grubim javaScript kodPored toga, postojala je gomila nepotrebnog koda. Ali danas je sve što nam treba je jQuery:
$ (Funkcija () () (
Podizbornik.css (()
Pozicija: "Apsolut",
ZINDEX: 1000.
});
Podizbornik.stop (). Kliznownwn (300);
$ (ovo) .Slideup (300);
});
});
});
Vrlo zanimljiva i jednostavna stvar. Objasnimo vam kako to funkcionira. Za početak, i kao i obično, pokrivamo naš kôd u jQuery kontroler:
$ (Funkcija () () (
...
});
Naš kôd se aktivira kada je kursor miša nevidljiv (funkcija mišem) na stavku na koju je dodijeljena klasa padajućeg izbornika ($ (". Pada"))). U našem slučaju ovo je veza do menija:
$ (Funkcija () () (
$ ("Pada"). Miuseenter (funkcija () () (
........
});
});
Provjerimo se da sakrivamo (sakrij ()) sve prethodne otvorene menije prije nego što se pokazivač miša ubacuje na sljedeću vezu:
$ (". Sublinks"). Stop (lažno, true) .Hide ();
Obratite pažnju na funkciju zaustavljanja koja nam pomaže da prikažemo samo jedan padajući izbornik u vrijeme kada se pokazivač miša pomiče duž različitih veza do menija. Ako ne koristimo ovu funkciju, svaki padajući izbornik ostat će otvoren dok ne u potpunosti premještamo kursor miša iz izbornika. To će stvoriti neku oblogu, pa bismo to trebali izbjeći. Dalje, preuzmemo trenutno otvoreni padajući meni i dodijelimo varijablu:
Var podizbornik \u003d $ (ovo) .parentno (). Sljedeći ();
To će biti u HTML kodu:
Kad je kursor miša na linku s padajućem razredom, krećemo se pomoću roditelja () i zaustavimo se "LI", a zatim sa sljedećim (), pokažemo se da budemo na željenom padajućem izborniku i "LI "Već će biti sa klasom podstava (sublinks). Dakle, jQuery nas čini procesom za pronalaženje onoga što se prikazuje padajući izbornik kada je kursor miša na određenoj vezi.
Podizbornik.css (()
pozicija: "Apsolut",
vrh: $ (ovo) .Poffset (). TOP + $ (ovo). Veght () + "px",
lijevo: $ (ovo) .set (). Levo + "px",
zINDEX: 1000.
});
Kodeks je vrlo važan, jer nas garantuje da se padajućeg izbornika prikazuje tačno pod određenom referencom. Ako je položaj izložen apsolutno, predmet možemo postaviti u bilo kojem području naše stranice. Dalje, definiramo gornji položaj veze na koji kursor lebdi s $ (ovo). FFFSET (). Vrh (ovo se odnosi na trenutnu stavku izbornika na koju je kursor indukran) i dodajte ga na visinu To je tako da je meni prikazan tačno referenca. Nešto poput toga se radi s lijevim parametrom. Zatim koristimo z-indeks da bismo bili sigurni da će naš izbornik biti prikazan na vrhu ostalih elemenata.
Podizbornik.stop (). Kliznownwn (300);
Naravno, možete koristiti druge mogućnosti za animaciju tipa Fadein, animaciju sa svojim stilovima i tako dalje.
Sada morate odvratiti od koncepta prikazivanja padajućeg izbornika i učinite da se sakriva. Potreban nam je ovaj odliv:
Podizbornik.mouseleave (funkcija () () (
$ (ovo) .Slideup (300);
});
Da biste sakrili padajući izbornik, koristimo prezime, antonim za kliznown. Razmotrite činjenicu da je podizbornik varijabla koju smo stvorili da odredimo određeni padajući izbornik.
Tako smo imali atraktivnu padajuće padajuće pada meni na jQuery..
Da bi se napisala navigacija u obliku vertikalnog padajućeg izbornika na jQuery s padajućom listom podkategorije, potrebno je razumjeti princip rada ovog mehanizma. Ali prvo ćemo analizirati navigacijsku strukturu:
Navigacija
Kao što ste već nagađali, naš padajući izbornik izgrađen je na temelju označenih popisa. Prilikom lebdeći kursor miša na oznaku
- test 1.
- test 2.
- test 3.
- test 4.
Ali kako pitati? Da, sve je zaista vrlo jednostavno. Za početak, bavimo se stolom stilova naše navigacijske liste, izgledat će ovako:
Tijelo (pozadina: RGB (244, 244, 244); font-lice: verdana; font-težina: 100;) / * --- navigacija --- * / #menu (širina: 200px; margina: 0; 2px;) #menu li (lista u stilu): nema;) .Menu (Pozicija: Relativna; Pozadina: Čokolada; Pozadina: -Moz-linear-gradijent (top, RGB (198, 255, 242), # 2AC4B3), # 2AC4B3) ; -Webkit-linearni gradijent (top, RGB (198, 255, 242), # 2AC4B3); Pozadina: -o-linearni gradijent (top, RGB (198, 255, 242), # 2AC4B3); granica : 1px Solid # 2AC4B3;) .Menu: lebde (pozadina: # 00c; pozadina: -moz-linear-gradijent (top, RGB (230, 230, 230), # 0CBFAB); -Helgot: -webkit-linearni gradijent ( Top, RGB (230, 230, 230), # 0cbfab); Pozadina: -o-linear-gradijent (top, RGB (230, 230, 230), # 0cbfab);) .Menu raspon (širina: 11px; visina: 11px; prikaz: blok; Pozicija: Apsolut; Top: 8px; kursor: pokazivač;) ..Menu ul (širina: 0; Pozicija: Apsolut; Na vrh: -1px; lijevo: 198px;) .menu ul li (pozadina: čokolada; pozadina: -Moz-linearni gradijent (top, RGB (198, 255, 242), # 2AC4B3); Pozadina: -webkit-linearni gradijent (top, RGB (198, 255, 242), # 2AC4B3); Pozadina: -o-linearni gradijent (top, RGB (198, 255, 242), # 2AC4B3); Granica: 1px solid #fff; ) .Menu ul: Hover (pozadina: # 00c; pozadina: -moz-linear-gradijent (top, RGB (230, 230, 230), # 0cbfab); pozadina: -webkit-linear-gradijent (vrh, RGB ( 230, 230, 230), # 0CBFFAB); Pozadina: -o-linear-gradijent (top, RGB (230, 230, 230), # 0cbfab);) .menu a (jastučići: 5px; evident: blok; Dekoracija: Nema; Boja: Bijela;) .Menu A: Zadržite pokazivač (boja: bijela;) / * --- kraj --- * /
Od lista stila može se vidjeti da se u početku padajuća lista ne skriva, ali ovaj trenutak ćemo biti ispravljeni pomoću:
$ (Dokument) .Deady (Funkcija () ($ ("MENU UL"). Sakrij (); $ ("Span" Menu "). CSS (" Pozadina "," URL ("down.png") "); $ ("# Meni li"). Hover (funkcija () ($ (ovo) .Celdren ("ul"). Prikaži (); / * ekvivalent $ ("ul", ovo). (); * / $ (); * / $ (); * / $ ( ovo) .find ("raspon"). CSS ("Pozadina", "URL (" desno.png ")"); / * ekvivalentno $ ("raspon", ovo). ("Pozadina", "URL (" Desno.png ")") "); * /), funkcija () ($ (ovo) .Celdren (" ul "). Sakrij (); / * ekvivalent $ (" ul ", ovo). (); * / $ (ovo) .Find ("raspon"). CSS ("Pozadina", "URL (" down.png ")"); / * $ ("raspon", ovo). ("Pozadina", "URL ( "Down.png") "); * /))))
Sada ćemo analizirati jQuery kod padajućeg izbornika, jer Možda se neko neće u potpunosti razumjeti. Na samom početku propisuje se sljedeća konstrukcija:
$ (Dokument) .ready (funkcija () ())
Propisane su naredbe koje se moraju izvoditi nakon preuzimanja pune stranice. To se radi tako da ne postoje različite vrste grešaka, ako je nemoguće pronaći nijedan predmet zbog činjenice da se Trite, još nije učitana.
$ ("Izbornik ul"). Sakrij ();
Šta ovaj ulazak znači? Dizajn "$ ()" omogućava vam odabir elemenata. Shodno tome, na samom početku moramo sakriti našu padajuću listu. Mi uzimamo dizajn "$ ()" i pišemo u njemu objekt koji vas zanima. U našem slučaju ovaj objekt će biti popis Sa klasom "Meni". Zatim propisujemo metodu "sakrij ()", što vam omogućava da sakrivate objekt koji vas zanima.
$ (". Span"). CSS ("Pozadina", "URL (" down.png ")");
Šta ona radi? Ona traži oznaku roditeljnog elementa koji je dodijeljen klasu "Meni" i, koristeći metodu "CSS" ("Pozadina", "URL (" down.png ")") ", dodjeljivanjem" pozadine " URL ("dolje. PNG") "." Down.png "je ikona koja pokazuje da lista može otvoriti.
Tada postoji dizajn, koji će otkriti našu listu, izgleda ovako:
$ ("# Meni li"). Hover (funkcija () ($ (ovo) .Celdren ("ul"). Prikaži (); $ (ovo). ("Span"). URL ("desno.png") ");), funkcija () ($ (ovo) .Cildren (" ul "). Sakrij (); $ (ovo). (" Span "). CSS (" SPAN "). , "URL (" DOWNG ")");)
Tražimo oznaku roditeljskog elementa od kojih je dodijeljen id \u003d "meni". Slijedeće je "lebde" metoda i u zagradama dvije funkcije. Prva funkcija bit će izvedena kada pokažete pokazivač miša, a drugo ako se izvrši ako pokazivač miša ostavite predmet koji vas zanima.
Prva funkcija je napisana:
$ (ovo) .Celdren ("ul"). Prikaži (); $ (ovo) .find ("raspon"). CSS ("Pozadina", "URL (" desno.png ")");
Dizajn "$ (ovo)" znači da smo zainteresirani za taj predmet na koji smo mi ovaj trenutak Donio (ovo iz Engleske. Ovo). I donijeli smo oznaku
Nakon toga, oznaka tražimo potomke, naime: oznaku i on ima pozadinu na drugu ikonu.
Nakon toga, funkcija je propisana, što čini sve, kao što je bilo prvobitno, nakon što pokazivač miša napusti listu stavku:
Funkcija () ($ (ovo) .Celdren ("ul"). Sakrij (); $ (ovo) .Find ("raspon"). CSS ("Pozadina", "URL (" DOWNG ")");)
Da bi pisani kod na jQuery i naš padajući izbornik radio ispravno, morate preuzeti biblioteku sa JQuery.com i povežite ga, govoreći nakon otvaranja
Liniju.To je to! Zaključno, želim primijetiti da ako je vaša web lokacija prilično zabavna, onda je moguće da će scenarij započeti prekasno (stranica će se dugo učitati), a korisnici će vidjeti kako se prvo otkrije u potpunosti, ali tek tada se otkriva To, vidite, vrlo ružno. Stoga je potrebno izdržati sve jQuery naredbe za ovaj dizajn: "$ (dokument) .ready (funkcija () ())". Izgledaće ovako:
$ (Dokument) .ready (funkcija () ()) $ (". Meni ul"). Sakrij (); $ (". Span"). CSS ("Pozadina", "URL (" down.png ")"); $ ("# Meni li"). Hover (funkcija () ("ul). Prikaži (); $ (ovo) .find (" Span "). (" URL "," URL ("desno.png") ");), Funkcija () ($ (ovo) .Celdren (" ul "). Sakrij (); $ (ovo) .Find (" Span ")." URL ("DOWNG") ");)))
Povezivanje naše skripte mora biti prebačen iz oznake
Najlakše, ispred zatvaranja oznakeIli možete spojiti scenarij odmah nakon označene liste.(Pada: 314)
Uz pomoć JQuery- Classic, napisani su članci o ovoj temi. Pokušao sam još malo komplicirati zadatak, dodajući mogućnost da ostanemo particije na otvoren meni (ili zatvoren, ovisno o korisničkom odabiru) prilikom prelaska kroz web mjesto.
Da biste riješili ovaj zadatak, odlučio sam koristiti dodatak za jQuery Cookie. Prednost ovog dodatka je da se operacija izvodi na strani klijenta, koja zauzvrat smanjuje opterećenje na poslužitelju. Minus - ako je korisnik onemogućen sa JS, dodatak neće raditi. Ali ova opcija Ne uzimam u obzir, jer tada nestaje cijela tačka padajućeg izbornika. Dakle, krenimo.
Za početak moramo povezati sam jQuery okvir i plugin jQuery. Kolačić:
Šifra: HTML
Daljnja oznaka. Izgledat će kao jednostavan popis, ništa natprirodno. Jedina zabilježite da u oznaci
Sigurno je naslov, kada kliknete na koji će meni ispasti:
Šifra: HTML
Pa, i tako u nedogled. Sada je najzanimljivije. U kodu ću dodati malo komentara, kako bih bio otprilike razumljiv, Chopach
Šifra: JS.
$ (dokument) .ready (funkcija () (
Ako ($. Cookie ("num_open_ul")) (// Provjereno ima li ulaz u kolačiće
Ako ($. Cookie ("num_open_ul")! \u003d 0) (// i ovaj zapis nisu jednak 0
var broard_eq \u003d parseint ($. kolačić ("num_open_ul") - 1);
$ ("Navigacija_body"). EQ (broj_eq) .Show (). prevlaka ("# navigacija H2.navigation_head: prvo"); dodatak ("Active_navigation");
}
};
$ ("# navigacija H2.navigaging_head"). Kliknite (Funkcija () () (// Kada kliknete) ova značajka će raditi
Ako (! $ (ovo) .Sljedeće (). je (": vidljivo")) (
$ ("div.navigation_body"). braća i sestre ("div.navigation_body"). klizač (500); // ako su drugi otvorili, zatvorili sve osim trenutne
}
$ (ovo) .Sljedeće ("div.navigation_body"). SlideToggle (500) .Sliblings ("div.navigation_body"). Kliznite (500);
$ (ovo) .Toggleclass ("Active_navigation"). BOJOVICE ("# Navigacija H2.navigation_head"). Removeclass ("Active_navigation"); // Otvorite dodanu klasu za promjenu stila
Settimeout (Fncookie, 600); // Snimanje u kolačiću s kašnjenjem, tako da je skripta uspjela dovršiti rad (500 ms-brzina, kašnjenje, 600ms)
});
Funkcija Fncookie () (// Sama funkcija snimanja
var broj_open_ul \u003d 0;
var i \u003d 0;
$ ("div.navigation_body"). Svaki (funkcija () () (
I ++;
Ako ($ (ovo) .S (": Vidljivo")) (
Broj_open_ul \u003d i;
}
$ .Cookie ("num_open_ul", broj_open_ul, (ističe: 3, put: "/"); // pohranite 3 dana za cijelu stranicu.
});
}
});
To je, ako je korisnik otvorio izbornik, napustio mjesto i otišao na njega nakon nekoliko dana, meni je i dalje otvoren za njega otvoren.
Pa, konačno, imamo malo barkoda: zapravo, CSS stilovi. Stvarno radite po vašem ukusu, u primjeru sam uzeo spreman dizajn iz jednog od projekata
Kod: CSS.
#Navigacija (
Marža: 80px Auto;
Širina: 250px;
}
#Navigagacija H2, #navigagation h2.navigation_head (
Veličina fonta: 18px;
Težina fonta: hrabri;
Boja pozadine: # FFB6C1;
Pozadina-slika: -webkit-gradijent (linearna, 50% 0,50% 100%, kolor-stop (0%, # FFE9E9), kolor-stop (100%, # ffb6c1);
Pozadina-slika: -webkit-linearni gradijent (# FFE9E9, # FFB6C1);
Pozadina-slika: -moz-linearni gradijent (# FFE9E9, # ffb6c1);
Pozadina-slika: -o-linearni gradijent (# FFE9E9, # FFB6C1);
Pozadina-slika: linearni gradijent (# FFE9E9, # ffb6c1);
Obloga: 5px 3px 6px 3px;
Marža: Auto;
Pozicija: Relativna;
}
#Navigagagacija H2.NaviGage_head: nakon (
Pozicija: Apsolutni;
Desno: 5px;
Boja: # 550000;
Sadržaj: "CSSB";
}
#Navigacija H2: lebdeći, #navigation h2.navigation_head: lebde (
Kursor: pokazivač;
}
.Active_navigaget (
Pozadina-slika: -webkit-gradijent (linearna, 50% 0,50% 100%, kolor-stop (0%, # ffb6c1), kolor-stop (100%, # ffe9e9))! Važno;
Pozadina-slika: -webkit-linearni gradijent (# FFB6C1, # FFE9E9)! VAŽNO;
Pozadina-slika: -moz-linearni gradijent (# ffb6c1, # ffe9e9)! Važno;
Pozadina-slika: -o-linearni gradijent (# ffb6c1, # ffeb9e9)! Važno;
Pozadina-slika: linearni gradijent (# FFB6C1, # FFE9E9)! VAŽNO;
}
.Active_navigacija: nakon (
Pozicija: Apsolutni;
Desno: 5px;
Sadržaj: "CSSD"! Važno;
}
.navigacija_body (
Prikaz: Nema;
}
#Navigagation ul (
margina: 0;
Padding: 0;
Lista stila: Nema;
}
* Html #navigagetirati ul li (
Visina: 1%;
}
#Navigation div.navigation_body ul li (
Marža-lijevo: 10px;
}
#Navigacija a (
Porodica font: "Times New Roman";
Prikaz: blok;
Boja: # 918871;
Padding: 3px;
Boja pozadine: # FFE3E0;
Granično dno: 1px solid #fff;
Dekoracija teksta: Nema;
}
#Navigacija A: Zadržite lebdeći (
Boja: # 585858;
Boja pozadine: # FFB6CC;
}
Ako je neko izvukao pažnju, ovdje sam pokušao koristiti svojstvo sadržaja: +/- sa zatvorenim / otvorenim izbornikom, ali možete dodati sliku ili bilo koji drugi dizajn. Pogledajte primjer onoga što smo učinili, možete
Kao i uvek, spreman sam da slušam pitanja i pokušavam da im odgovorim. Sve najbolje, sve najbolje.
U ovoj lekciji pokazat ćemo vam kako stvoriti bočni padajući izbornik za ravnomjernu jednostavnu navigaciju na web mjestu. Takav je izbornik popularan trend modernog web dizajna. Na mnogim mjestima se koristi ova vrsta menija. S njom se možete riješiti haosa na stranicama na projektu, činite ga čitljivijim, fokusirajući pažnju korisnika na glavni sadržaj.
Ovo je odličan način za postizanje minimalizma bez ometajućih faktora. Danas ćemo sami stvoriti takav izbornik.
Da biste kreirali navigacijski meni, prvo pročitajmo postavke:
Prvo morate preuzeti normalizaciju.css i konfigurirati zadane stilove pretraživača, provjerite da li je meni izgleda isto u svim pretraživačima. Da biste prikazali strelicu prije stavke izbornika sa podrezanjima, koristit ćemo fontawesome. Da biste prebacili časove u meniju, učitajte jQuery i pomaknite cjelokupni jQuery kod korisnika u script.js. Posljednja veza je glavna tablica za web projekt.
Icon Hamburger
Ikona hamburgera je uobičajeni atribut navigacije web lokacije. Često se kreira pomoću ikone font, poput fontawesome, ali u ovoj lekciji dodaćemo neku animaciju i zato ćemo ga stvoriti ispočetka. Naša ikona hamburgera je obnarstvo koji sadrži tri klase div, prikazan u obliku vodoravnih traka.
Stilovi izgledaju ovako:
Toggle-gumb (Pozicija: fiksno; širina: 44px; visina: 40px; obloga: 4px; tranzicija: .25s; z-indeks: 15;) .Togl: pokazivač:) .Tenu -Bar (Pozicija: apsolut; Border-poluus: 2px; širina: 80%; tranzicija: .5s;).). (Granica: 4px Solid # 555; granično dno: nema; 0;) .Toggle-gumb .Menu-bar-srednja (visina: 4px; Boja pozadine: # 555; margin-top: 7px; marža: 4px;) .Togl-bac -Bottom (obrub: 4px solid # 555; granični vrh: Nema; Top: 22px;) .Button-otvoren .Menu-bar-top (transformacija: rotiraju (8px, 8px); prijelaz: .5s; ) .Button-Open .Menu-bar-srednja (Transform: Prevedi (230px); Tranzicija: .1S lakoća; Opacity: 0;). (Transformacija: Rotiranje (-45deg) Prevedi (8px, -7px); Tranzicija: .5s;)
Ikona ima fiksni položaj i ne mijenja ga prilikom pomicanja stranice. Takođe ima Z-indeks 15, što znači da će to uvijek biti iznad ostalih elemenata. Sastoji se od tri bara, od kojih svaka dijeli druge stilove. Stoga ćemo svaku traku preći na klasu.Menu-baru. Ostatak stilova se kreću na odvojene časove. Čarolija se događa kada dodamo još jedan razred u okviru raspona, što je otvoreno. Dodajemo ga koristeći jQuery Na sledeći način:
$ (Dokument) .Preied (Funkcija () (Var $ ToggleButton \u003d $ (". Toggle-gumb"); $ toggleButton.on ("klik", funkcija () ($ (ovo) .Toggleclass ("TABLE-OTVOREN") );));));
Za one koji nisu upoznati sa jquery - inicijaliziramo varijablu s $ ToggleButton, koji sadrži našu ikonu. Spremamo ga u varijabli bez potrebe korištenje JavaScripta. Zatim kreiramo slušatelj događaja koji uzima u obzir klikove na ikoni. Svaki put kada korisnik klikne na ikonu Hamburger, slušatelj događaja pokreće funkciju Toggleclass (), koja prebacuje klasu.Button-Open.
Kad se doda Class.Button-Open, možemo ga koristiti za promjenu metoda prikazivanja stavki. Koristimo CSS3 Translate () i rotiranje () funkcije tako da gornje i donje trake zakretaju 45 stepeni, a srednji bar je pomaknut udesno i nestao. Evo što se animacija može konfigurirati:
Pokretanje navigacijskog menija
Sada kada imate ikonu hamburgera, napravimo korisniku i stvorimo padajući izbornik kada kliknete na njega. Ovako izgleda označavanje menija:
Sada nećemo zadržati na svakom stilu za ovaj meni, umjesto toga fokusirajte se na nekoliko važni trenuci. Prije svega, to je div i klasa.menu-omotač. Pogledajte njegove stilove:
Zamotaj izbornika (# 6968AB; Pozicija: fiksna; Vrh: 0; Visina: 100%; širina: 280px; marža - veličina fonta: 1Em; Težina fonta: 700; preliv: Automatski ; Tranzicija: .25s; z-indeks: 10;)
Položaj je fiksiran, pa kada pomicanjem stranice izbornika uvijek ostaje u istom položaju. Visina od 100% omogućava meni da zauzima sav vertikalni prostor na stranici. Imajte na umu da margin-lijevo polje ima negativan broj jednak širini izbornika. To znači da će meni nestati iz prozora za gledanje. Da biste ponovo učinili vidljivim, stvaramo još jedan razred pregovora sa jQueryjem. Naš javaScript datoteka Izgledaće ovako:
$ (Dokument) .ready (Funkcija () (var $ togglebutton \u003d $ (". Prebacivanje-gumb"), $ MENUWRAP \u003d $ (". Menu-Wrap"); $ toggleButton.on ("klik", funkcija () ($ (ovo) .Toggleclass ("dugme-open"); $ MENUWRAP.Toggleclass ("Izbornik-show");));););
Dodajte još jedan $ MENUWRAP varijablu koja sadrži školjku izbornika. Upotrijebite isti rukolaživač događaja koji smo stvorili ranije. Samo ovaj put prebacimo dvije klase: jedan za gumb i jedan za školjku menija. Vrijednost lijevog polja klase.Menu-show je 0, dodat će učinak sjene.
Izbornik-Show (Margin-lijevo: 0; Box-Shadow: 4px 2px 15px 1px # b9adad;)
Podmeni i veze
Možete primijetiti da u jednom od stavki liste nalazi se klasa.Menu-Item-ima djeca, koja sadrži podizbornik. Pored toga, oznaka raspona postavlja se odmah pod vezom sa Class.Sidebar-sa strelicom.
sPAN ima :: Nakon pseudo-elemenata i sadrži strelicu sa fontama. Podmetač je podmetač skriven i bit će vidljiv samo kad je pritisnut na strelicu. Evo kako to možemo učiniti sa jquery:
$ (Dokument) .Preied (Funkcija () (var $ boinebarrow \u003d $ ("strelica sa bočnom trakom"); $ boidebarrow.click (funkcija () (ovo) .Sljedeće (300);) );));
Kada kliknemo na strelicu, nazivamo funkciju koja je zauzvrat usmjerena na sljedeću stavku odmah nakon raspona (u našem slučaju to je podizbornik) i čini ga vidljivim. Funkcija koju koristimo je klizna. Izaziva da se predmet pojavi i nestane. Funkcija u našem primjeru ima jedan parametar - trajanje animacije.
Stavke menija u primjeru imaju efekt zadrhtavanja. Stvara se pomoću :: Nakon pseudo elementa. Kod izgleda ovako:
Meni-bočna traka li\u003e a :: poslije (sadržaj: "; ekran: blok; visina: 0,15EM; Pozicija: apsolut; TOP: 100%; preostalo: 50%; transformacija: prevođenje (-50%) ; Pozadina-slika: linearni gradijent (na desnoj, transparentno 50,3%, # fffa3b 50,3%); tranzicija: Pozicija .2s .1s outy-out; Pozadina: 200% Auto;) .Menu-boidebar li\u003e O: HOVER :: Nakon (pozadina: -100% 0;)
:: Nakon pseudo-elemenata sadrži element nivoa bloka na dnu svake veze sa punom širinom i visinom 0,15EM. Izgleda sve to kao podvlačenje. Posebnost je da ne koristimo samo boju pozadine u liniju, koristimo linearnu gradijentnu () funkciju na pozadinskoj slici. Iako je ova značajka dizajnirana za stvaranje gradijenata u boji, možemo promijeniti boju specificiranjem željenog interesa.
Meni-bočna traka li\u003e a :: poslije (na desno, prozirno 50,3%, # fffa3b 50,3%);););););
Polovina linije je ovdje prozirna, a druga polovina je žuta. Izrada pozadine pozadine 200%, udvostručujemo širinu našeg bloka. Sada transparentan dio zauzima cijelu širinu referentne širine, a žuti dio se pomiče ulijevo i postaje nevidljiv. Promiješavamo položaj pozadine prilikom lebdenja na -100%. Sada žuti dio postaje vidljiv i proziran - skriven.
Umjesto prozirnog dijela, možete koristiti bilo koju drugu boju. Takođe možete eksperimentirati sa gradijentima.
Svaki od elemenata koje smatra američkim radovima u cjelini. Takav izbornik možete kreirati pomoću bilo kojeg dizajnerskog objekta iz kolekcije TemplateMonster. Kao što vidite, učinite to lakše nego što možete zamisliti. Sretno u kreiranju profesionalnih i korisničkih web lokacija!
