Koristeći klasični JQuery, napisano je mnogo članaka na ovu temu. Pokušao sam malo zakomplicirati zadatak dodajući mogućnost ostavljanja odjeljaka izbornika otvorenima (ili zatvorenima, ovisno o izboru korisnika) dok se krećete web mjestom.
Kako bih riješio ovaj problem, odlučio sam koristiti dodatak JQuery Cookie. Prednost ovog dodatka je što se operacija izvodi na strani klijenta, što zauzvrat smanjuje opterećenje poslužitelja. Minus - ako je korisniku onemogućen JS, dodatak neće raditi. Ali ne razmatram ovu opciju, jer tada nestaje cijela poanta padajućeg izbornika. Dakle, počnimo.
Prvo moramo povezati sam JQuery framework i JQuery Cookie dodatak:
Kod: HTML
Sljedeće je označavanje. Izgledat će kao jednostavan popis, ništa nadnaravno. Jedino što ću napomenuti je da oznaka treba sadržavati naslov, kada kliknete na njega pada izbornik:
Kod: HTML
Prvi naslov
- Prva poveznica
- Druga poveznica
- Treća poveznica
Drugi naslov
- Prva poveznica
- Druga poveznica
- Treća poveznica
Treći naslov
- Prva poveznica
- Druga poveznica
- Treća poveznica
Četvrti naslov
- Prva poveznica
- Druga poveznica
- Treća poveznica
Pa, i tako u nedogled. Sada dolazi najzanimljiviji dio. Dodat ću nekoliko komentara u kod kako bi bilo otprilike jasno.
Šifra: JS
$(dokument).spreman(funkcija())(
if($.cookie("num_open_ul"))( // provjerava postoji li unos u kolačićima
if($.cookie("num_open_ul") != 0)( // i ovaj unos nije jednak 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function())( // kada se klikne, ova funkcija će raditi
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // ako su drugi otvoreni, zatvori sve osim trenutnog
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(ovo).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // klasa je dodana otvorenoj za promjenu stila
setTimeout(fncookie, 600); //samo snimanje u kolačiće s odgodom, kako bi skripta imala vremena dovršiti posao prije snimanja (500ms - brzina, odgoda - 600ms)
});
funkcija fncookie())( // sama funkcija snimanja
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
i++;
if($(this).is(":visible"))(
broj_otvoren_ul = i;
}
$.cookie("num_open_ul", broj_open_ul, (ističe:3, put:"/")); // pohranjujte 3 dana za cijelu stranicu.
});
}
});
Odnosno, sada, ako je korisnik otvorio izbornik, napustio stranicu i vratio se na nju nakon nekoliko dana, meni će i dalje ostati otvoren za njega.
I na kraju, ostao nam je mali detalj: zapravo, CSS stilovi. Možete to učiniti po svom ukusu, u primjeru sam uzeo gotov dizajn iz jednog od projekata
Kod: CSS
#navigacija (
margina: 80px auto;
širina: 250px;
}
#navigacija h2, #navigacija h2.navigacijska_glava (
veličina fonta: 18px;
font-weight: bolder;
boja pozadine: #ffb6c1;
pozadinska slika: -webkit-gradijent(linearno,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
pozadinska slika: -webkit-linearni gradijent(#ffe9e9,#ffb6c1);
pozadinska slika: -moz-linearni gradijent(#ffe9e9,#ffb6c1);
pozadinska slika: -o-linearni gradijent(#ffe9e9,#ffb6c1);
pozadinska slika: linearni gradijent(#ffe9e9,#ffb6c1);
ispuna: 5px 3px 6px 3px;
margina: auto;
položaj: relativan;
}
#navigation h2.navigation_head:after (
pozicija: apsolutna;
desno: 5px;
boja: #550000;
sadržaj: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kursor: pokazivač;
}
.aktivna_navigacija(
pozadinska slika: -webkit-gradient(linearno,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !važno;
pozadinska slika: -webkit-linearni gradijent(#ffb6c1,#ffe9e9) !važno;
pozadinska slika: -moz-linearni gradijent(#ffb6c1,#ffe9e9) !važno;
pozadinska slika: -o-linearni gradijent(#ffb6c1,#ffe9e9) !važno;
pozadinska slika: linearni gradijent(#ffb6c1,#ffe9e9) !važno;
}
.active_navigation:after (
pozicija: apsolutna;
desno: 5px;
sadržaj: "cssd" !važno;
}
.navigation_body(
prikaz: ništa;
}
#navigacija ul (
margina: 0;
ispuna: 0;
list-style-type: nijedan;
}
* html #navigacija ul li(
visina: 1%;
}
#navigation div.navigation_body ul li (
margin-lijevo: 10px;
}
#navigacija a (
obitelj-fontova: "Times New Roman";
prikaz: blok;
boja: #918871;
ispuna: 3px;
boja pozadine: #ffe3e0;
border-bottom: 1px solid #fff;
tekst-ukras: nema;
}
#navigation a:hover (
boja: #585858;
boja pozadine: #ffb6cc;
}
Ako je netko primijetio, ovdje sam pokušao koristiti svojstvo content: +/- kada je izbornik zatvoren/otvoren, ali možete dodati sliku ili bilo koju drugu strukturu. Ovdje možete vidjeti primjer onoga što smo smislili
Kao i uvijek, spreman sam saslušati pitanja i pokušati na njih odgovoriti. Svaka cast, svaka cast.
U ovom članku ćemo razviti jednostavan padajući izbornik koristeći jQuery. Prvo pogledajte demo datoteku. Nadamo se da poznajete barem malo osnova jQueryja i CSS-a. Ključni aspekti stvaranja ovog padajućeg izbornika su primjena CSS parametara: položaj, vrh, lijevo, z-index.
Pomoću ovih parametara možemo biti sigurni da će se naš izbornik pojaviti točno ispod poveznice na koju smo priješli pokazivačem miša i da će točno pokriti sve ostale elemente. Također ćemo učiniti da se izbornik pojavi kada lebdite i nestane kada se kursor pomakne. Za implementaciju ovih događaja koristit ćemo jQuery funkcije: mouseenter i mouseleave. I to je sve što nam treba za izradu padajućeg izbornika!
Demo datoteka konačnog rezultata i poveznica za preuzimanje
HTML kôd
Provjerite HTML kôd za padajući izbornik:
Kao što vidite, ovdje ćemo koristiti neuređene liste za implementaciju stavki izbornika. Svakoj vezi izbornika dodijeljena je klasa padajućeg izbornika, a sam padajući izbornik pokriven je klasom podveze. Nazive klasa koristit će jQuery kako bi odredio koji će izbornik prikazati.
CSS kod
Provjerite CSS kod:
/* CSS za početak padajućeg izbornika */
ul
{
list-style:nema;
padding:0px;
margina:0px
}
ulli
{
prikaz:umetnuti;
float:lijevo;
}
ulli a
{
boja:#ffffff;
pozadina:#990E00;
margin-desno:5px;
font-weight:bold;
veličina fonta:12px;
obitelj-fontova:verdana;
tekst-dekoracija:nema;
prikaz: blok;
širina:100px;
visina:25px;
line-height:25px;
poravnanje teksta: središte;
-webkit-border-radius:5px;
-moz-border-radius:5px;
rub: 1px solid #560E00;
}
ul li a:lebdjeti
{
boja:#cccccc;
pozadina:#560E00;
font-weight:bold;
tekst-dekoracija:nema;
prikaz: blok;
širina:100px;
poravnanje teksta: središte;
-webkit-border-radius:5px;
-moz-border-radius:5px;
obrub: 1px čvrsti #000000;
}
ul li.podveze a
{
boja:#000000;
pozadina:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
tekst-dekoracija:nema;
prikaz: blok;
širina:100px;
poravnanje teksta: središte;
margin-top:2px;
}
ul li.podveze a:lebdjeti
{
boja:#000000;
pozadina:#FFEFC6;
font-weight:normal;
tekst-dekoracija:nema;
prikaz: blok;
širina:100px;
poravnanje teksta: središte;
}
ul li.podveze
{
prikaz: ništa;
}
/* CSS za kraj padajućeg izbornika */
Većina CSS koda koristi se za formatiranje izbornika (možete prilagoditi izgled izbornika kako god želite), ali i ovdje postoje neke važne točke:
1 – Uklanjanje kartica pomoću list-style:none;
2 – Znamo da su popisi blok elementi i uvijek se prikazuju okomitim redoslijedom. Kako bismo ih postavili vodoravno, dajemo im parametar inline elements i poravnavamo ih ulijevo pomoću koda:
prikaz:umetnuti;
float:lijevo;
3 – Veze su prema zadanim postavkama ugrađeni elementi. Pretvaramo ih u blok elemente pomoću display:block (tako da im sada možemo dati vrijednost širine).
4 – Skrivanje cijelog izbornika pomoću:
Ul li.podveze
{
prikaz: ništa;
}
jQuery
Zamislite stare dane kada su padajući izbornici bili implementirani korištenjem grubog javascript koda i puno nepotrebnog koda. Ali danas sve što nam treba je jQuery:
$(funkcija())(
Podizbornik.css((
pozicija:"apsolutno",
zIndeks:1000
});
Podizbornik.stop().slideDown(300);
$(ovo).slideUp(300);
});
});
});
Vrlo zanimljiva i jednostavna stvar. Dopustite da vam objasnimo kako to funkcionira. Za početak, kao i obično, omotamo naš kod u jQuery kontroler:
$(funkcija())(
...
});
Naš kod se aktivira kada kursor miša lebdi (mouseenter funkcija) preko elementa kojem je dodijeljena klasa padajućeg izbornika ($(".dropdown"). U našem slučaju, ovo je poveznica u izborniku:
$(funkcija())(
$(".padajući").mouseenter(funkcija())(
........
});
});
Pobrinimo se da sakrijemo() sve prethodne otvorene izbornike prije nego kursor miša skoči na sljedeću vezu:
$(".podveze").stop(false, true).hide();
Imajte na umu značajku zaustavljanja koja nam pomaže da prikažemo samo jedan padajući izbornik kada kursor miša prelazi preko različitih veza u izborniku. Ako ne koristimo ovu funkciju, tada će svaki padajući izbornik ostati otvoren sve dok kursor miša potpuno ne odmaknemo od izbornika. Ovo će stvoriti određeno preklapanje, pa bismo to trebali izbjegavati. Zatim uzimamo trenutno prošireni padajući izbornik i dodjeljujemo ga varijabli:
Var submenu = $(this).parent().next();
Ovo će se dogoditi u HTML kodu:
Kada kursor miša prijeđemo preko poveznice s padajućom klasom, vraćamo se unatrag pomoću parent() i zaustavljamo se na “li”, a zatim se pomoću next() nalazimo na željenom padajućem izborniku i “li” već će biti s vezama podklase (podveze). Na ovaj način, jQuery nam olakšava pronalaženje padajućeg izbornika za prikaz kada mišem prijeđemo iznad određene veze.
Podizbornik.css((
pozicija:"apsolutno",
vrh: $(this).offset().top + $(this).height() + "px",
lijevo: $(ovo).offset().lijevo + "px",
zIndeks:1000
});
Kod je vrlo važan jer osigurava da se padajući izbornik prikazuje točno ispod određene veze. Ako je pozicija postavljena na apsolutnu, možemo postaviti element u bilo koje područje naše stranice. Zatim određujemo gornji položaj lebdenja veze pomoću $(this).offset().top (ovo se odnosi na stavku izbornika nad kojom lebdi) i dodajemo vrijednost visine tako da se izbornik pojavljuje točno ispod veze. Nešto slično radimo s lijevim parametrom. Zatim koristimo z-index kako bismo bili sigurni da se naš izbornik pojavljuje na vrhu ostalih elemenata.
Podizbornik.stop().slideDown(300);
Naravno, možete koristiti druge opcije animacije kao što je fadeIn, animacija pomoću vlastitih stilova i tako dalje.
Sada se moramo odmaknuti od koncepta prikazivanja padajućeg izbornika i učiniti ga skrivenim. Trebamo ovaj dio koda:
Podizbornik.mouseleave(function())(
$(ovo).slideUp(300);
});
Za skrivanje padajućeg izbornika koristimo slideUp, antonim za slideDown. Imajte na umu da je podizbornik varijabla koju smo stvorili da definiramo određeni padajući izbornik.
Dakle, imamo atraktivan padajući izbornik na jednoj razini u jQueryju.
Danas bih želio napraviti izbor relativno nove generacije navigacije za stranicu - izbornici preko cijelog zaslona. Koriste se u slučajevima kada nema same navigacije na stranici, postoji samo jedan gumb, kada se klikne, otvara se izbornik. Sličan princip može se vidjeti u -frameworku: kada navigacijska traka više ne stane, blok s popisom stavki izbornika je jednostavno skriven. Na njegovom mjestu pojavljuje se gumb sa slikom od, u pravilu, tri pruge. Kada se pritisne, pojavljuje se cijeli izbornik. Na mnogim modernim web stranicama izbornik je uvijek skriven, čak i na velikim zaslonima. To je učinjeno kako se stranica ne bi učitavala. Iako to sada ne biste trebali raditi na svim svojim projektima. Ako je izbornik od sekundarne važnosti, možete ga sakriti, ali ako imate veliku stranicu sa složenom strukturom, bolje je ne koristiti ovu opciju. Tako. Shvatili smo opći princip rada, ali ova vrsta jelovnika prilično je standardna, želim nešto novo. Nedavno sam počeo primjećivati stranice na kojima navigacija ne ispada samo, već se u potpunosti otvara na cijelom ekranu u skočnom prozoru. Nešto poput popularnih slajd panela, ali cijela ova stvar zauzima cijelu površinu radnog prostora. Iza stranica su se počeli pojavljivati zasebni dodaci jQuery i css3 rješenja, o čemu se zapravo radi u ovoj temi.
Osobno mi se jako sviđa ova implementacija navigacijskog izbornika jer je praktična za korisnike mobilnih uređaja i izgleda vrlo impresivno na velikim monitorima. Pojavljuje se sve više stranica s izbornicima preko cijelog zaslona, također postoji više besplatnih jQuery dodataka, a koncept postupno postaje trend.
Tako. Predstavljamo vam 20 jQuery dodataka za izbornike preko cijelog zaslona u skočnom prozoru.
Vrlo lijep dodatak dizajnu prozora je animirana SVG ikona. Prema zadanim postavkama, izgleda kao tri trake, ali kada se klikne, ikona se pretvara u strelicu, što pokazuje da se izbornik može sakriti Zaobljena animirana navigacija Još jedna vrlo zgodna jquery skripta za navigaciju preko cijelog zaslona od istih programera kao i gornji dodatak. Ova skripta ima vrlo cool i neobičan efekt izgleda. Kada kliknete gumb izbornika, iz ikone pomoću css3 preko cijelog monitora izlazi val, koji prerasta u pozadinu stavki izbornika. Isti učinak skrivanja.
Ova navigacija odlično radi na mobilnim uređajima, ali s obzirom da je efekt izgleda dosta težak, mislim da će sve biti sporo na starijim telefonima (nisam je testirao, pa će mi biti drago da napišete svoje iskustvo u komentarima) .
Nažalost, ne radi ispravno na mobilnim telefonima: ako ima puno stavki izbornika i ne stanu na zaslon, tada se okomito pomicanje ne pojavljuje i navigacija se jednostavno prekida.
Nakon što sam primio nekoliko zahtjeva, odlučio sam napisati članak o tome kako napraviti padajući izbornik. Najbolji i najlakši način za izradu takvog izbornika je oslanjanje na jQuery.
Pogledajmo prvo HTML oznake
Jednostavan padajući izbornik temeljen na jQuery Jednostavan padajući izbornik
- Dom
- Proizvodi
- Usluge
- Kontaktirajte nas
Sadržaj
Postoji jednostavan neuređeni popis ul , njegove li oznake temelj su navigacijskog izbornika. Zatim dodajte kod u nastavku u odgovarajuću oznaku li, to će strukturirati padajući popis.
Ako obratite pozornost, primijetit ćete dvije stvari:
1. Oznaka li ima padajuću klasu.
2. Nadređena veza ima klasu ddIcon.
Klasa padajućeg izbornika koristi se u jQueryju za prikaz/sakrivanje padajućeg izbornika. Druga klasa, ddIcon, koristi se za prikaz pokazivača na padajući izbornik.
Nema ničeg posebnog u vezi stilova izbornika - uobičajeni stilovi su:
Spremnik (širina: 960px; margina: 0 automatski; padding-top: 50px; ) .container h1 (font-size: 30px; color: #666; margin-bottom: 1em; ) .container nav (border-radius: 4px; boja pozadine: #fff; visina: 37px; ) .kontejner nav ul li (položaj: relativan; float: lijevo; ) .kontejner nav ul li a (veličina fonta: 12px; tekstualni ukras: nema; težina-fonta: bold; text-transform: uppercase; color: #545454; padding: 13px 15px; display: block; border-desno: 1px solid #f9f9f9; ) .container nav ul li a.ddIcon ( background: transparent url("dd.png) ") bez ponavljanja 86% 52%; padding: 13px 25px 13px 15px; ) .container nav ul li a:hover ( background-color: #cc333f; color: #fff; ) .container nav ul li.active a ( background -boja: #cc333f; boja: #fff; ) .kontejner nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .kontejner nav ul li .subNav ( pozicija: apsolutna; pozadinska boja: # cc333f; padding: 15px 15px 20px; width: 172px; left: 0px; top: 38px; display: none; ) .container nav ul li .subNav .navSection ( padding: 5px 0; ) .container nav ul li .subNav h4 (margin-bottom: 0.5em; ) .container nav ul li .subNav h4 a (font-size: 11px; color: #edc951; text-transform: capitalize; border-bottom: 1px solid #D33B47; padding: 7px 10px; ) .container nav ul li .subNav h4 a:hover (boja: #edc951; ) .container nav ul li .subNav h4 a span ( float: desno; font-size: 10px; boja : #fff; -moz-transition: color 0.5s ease 0s; ) .container nav ul li .subNav h4 a span:hover ( boja: #390206 ) .container nav ul li .subNav a ( float: none; border: none ; display: block; text-transform: capitalize; color: #fff; padding: 7px 15px; -moz-transition: color 0.5s ease 0s; line-height: 1.3; ) .container nav ul li .subNav:hover ( boja : #390206; ) .container .section ( jasno: oboje; padding: 10px; ) .container .section article p (font-size: 16px; color: #488fb8; line-height: 1.3; ) .container .section article header p ( padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; )
Sada moramo oživjeti padajući izbornik. U tome će nam pomoći najjednostavnija jQuery funkcija.
$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css(( " display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":" relativno ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display": "none ")); $(this).removeClass("active"); $("nav ul li").css(("position":"relative", "z-index":"1")); )) ; ));
Za svaki element popisa moguće je kreirati vlastiti padajući izbornik: unutar elementa li postavite blok s klasom .subnav i također dodijelite klasu .dropdown samom li.
