Uz pomoć klasičnog jQueryja napisano je dosta članaka na ovu temu. Pokušao sam malo zakomplikovati zadatak dodajući mogućnost da se dijelovi menija drže otvorenim (ili zatvorenim, ovisno o izboru korisnika) kada se krećete po stranici.
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 servera. Minus - ako korisnik ima onemogućen JS, dodatak neće raditi. Ali ne razmatram ovu opciju, jer tada cela poenta padajućeg menija potpuno nestaje. Dakle, počnimo.
Prvo moramo povezati sam jQuery framework i dodatak jQuery Cookie:
Kod: HTML
Sljedeća je oznaka. Izgledat će kao jednostavna lista, ništa natprirodno. Jedina stvar koju treba napomenuti je to u oznaci
trebao bi postojati naslov, kada se klikne, meni će ispasti:
Kod: HTML
I tako u nedogled. E sad, najzanimljivije. U kodu ću dodati nekoliko komentara da bude približno jasno, chopach
Šifra: JS
$(document).ready(function()(
if($.cookie("num_open_ul"))( // provjeriti postoji li unos kolačića
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, zatvorite sve osim trenutnog
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // open je dodao klasu za promjenu stila
setTimeout(fncookie, 600); //zapisivanje u kolačiće samo sa zakašnjenjem, tako da skripta ima vremena da završi posao prije pisanja (500ms - brzina, kašnjenje - 600ms)
});
function fncookie()( // sama funkcija snimanja
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(ovo).is(":vidljivo"))(
broj_otvoreni_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (ističe:3, put:"/")); // pohraniti 3 dana za cijelu stranicu.
});
}
});
Odnosno, sada, ako je korisnik otvorio meni, napustio stranicu i vratio se na nju za par dana, meni će i dalje ostati otvoren za njega.
I konačno, još uvijek imamo mali dodir: u stvari, css stilove. Radite po svom ukusu, u primjeru koji sam uzeo gotov dizajn iz jednog od projekata
Šifra: CSS
#navigation(
margina: 80px auto;
širina: 250px
}
#navigation h2, #navigation h2.navigation_head (
veličina fonta: 18px;
font-weight: bolder;
boja pozadine: #ffb6c1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
padding: 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č;
}
.active_navigation(
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !važno;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after (
pozicija: apsolutna;
desno: 5px;
sadržaj: "cssd" !važno;
}
.navigation_body(
display:none;
}
#navigation ul (
margina: 0;
padding: 0;
tip-stil liste: nijedan;
}
* html #navigation ul li(
visina: 1%;
}
#navigation div.navigation_body ul li (
margin-left: 10px;
}
#navigation a (
porodica fontova: "Times New Roman";
display:block;
boja: #918871;
padding: 3px
boja pozadine: #ffe3e0;
border-bottom: 1px solid #fff;
dekoracija teksta: nema;
}
#navigation a:hover (
boja: #585858;
boja pozadine: #ffb6cc;
}
Ako je neko obratio pažnju, ovdje sam pokušao koristiti svojstvo sadržaja: +/- kada je meni zatvoren/otvoren, ali možete dodati sliku ili bilo koji drugi dizajn. Ovdje možete vidjeti primjer onoga što smo radili
Kao i uvijek, spremni saslušati pitanja i pokušati odgovoriti na njih. Sve najbolje, sve najbolje.
U ovom članku ćemo razviti jednostavnu padajući meni koristeći jQuery. Prvo pogledajte demo fajl. Nadamo se da imate barem neka osnovna znanja o jQueryju i CSS-u. Ključni aspekti kreiranja ovog padajućeg menija su primena CSS parametara: pozicija, vrh, leva, z-indeks.
Koristeći ove opcije, možemo biti sigurni da će se naš meni pojaviti tačno ispod veze preko koje je lebdio i da će precizno pokriti sve ostale stavke. Takođe ćemo učiniti da se meni prikaže kada se lebdi i nestane kada se kursor pomeri. Za implementaciju ovih događaja koristit ćemo jQuery funkcije: mouseenter i mouseleave. I to je sve što nam treba da kreiramo padajući meni!
Demo fajl konačnog rezultata i link za preuzimanje
HTML kod
Pogledajte HTML kod za padajući meni:
Kao što vidite, ovdje ćemo koristiti neuređene liste za implementaciju stavki menija. Svakoj vezi menija je dodeljena klasa padajućeg menija, a sam padajući meni je pokriven klasom podveze. Imena klasa će koristiti jQuery da odredi koji meni će prikazati.
CSS kod
Pogledajte CSS kod:
/* CSS za padajući meni Start */
ul
{
list-style:none;
padding:0px;
margina:0px
}
ul li
{
display:inline;
float:left;
}
ul li a
{
boja:#ffffff;
background:#990E00;
margin-right:5px;
font-weight: bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
širina:100px;
visina:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
granica: 1px čvrsta #560E00;
}
ul li a: lebdjeti
{
boja:#cccccc;
background:#560E00;
font-weight: bold;
text-decoration:none;
display:block;
širina:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
granica: 1px čvrsta #000000;
}
ul li.sublinks a
{
boja:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
širina:100px;
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover
{
boja:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
širina:100px;
text-align:center;
}
ul li.sublinks
{
display:none;
}
/* CSS za kraj padajućeg menija */
Većina CSS koda se koristi za formatiranje menija (možete da stilizujete meni kako god želite), ali postoje i neke važne tačke:
1 – Uklanjanje kartica sa list-style:none;
2 – Znamo da su liste elementi na nivou bloka i da se uvijek prikazuju vertikalno. Da bismo ih postavili vodoravno, dajemo im parametar inline elementa i poravnavamo ih na lijevoj strani sa sljedećim kodom:
display:inline;
float:left;
3
– Veze su po defaultu inline elementi. Konvertujemo ih u blok elemente sa display:block (tako da im sada možemo dati vrijednost širine).
4 – Sakrij sve menije sa:
Ul li.sublinks
{
display:none;
}
jQuery
Zamislite stara vremena kada su padajući meniji implementirani sa grubim javascript kodom, plus gomilom nepotrebnog koda. Ali danas sve što nam treba je jQuery:
$(function()(
Submenu.css((
pozicija: "apsolutno",
zIndeks:1000
});
Podmeni.stop().slideDown(300);
$(ovo).slideUp(300);
});
});
});
Vrlo zanimljiva i jednostavna stvar. Dozvolite nam da vam objasnimo kako to funkcionira. Za početak, kao i obično, umotavamo naš kod u jQuery kontroler:
$(function()(
...
});
Naš kod se poziva kada se kursor miša lebdi (funkcija mouseenter) iznad elementa kojem je dodijeljena klasa padajućeg menija ($(.dropdown")). U našem slučaju, ovo je link u meniju:
$(function()(
$(".dropdown").mouseenter(function()(
........
});
});
Pobrinimo se da sakrijemo() sve prethodne otvorene menije prije nego što miš skoči na sljedeću vezu:
$(".sublinks").stop(false, true).hide();
Obratite pažnju na funkciju zaustavljanja koja nam pomaže da prikažemo samo jedan padajući meni u isto vreme kada se kursor miša kreće do različitih veza u meniju. Ako ne koristimo ovu funkciju, tada će svaki padajući meni ostati otvoren do trenutka kada u potpunosti udaljimo kursor miša iz menija. Ovo će stvoriti neko preklapanje, tako da bismo to trebali izbjegavati. Zatim uzimamo trenutno prošireni padajući meni i dodjeljujemo ga varijabli:
Var podmeni = $(ovo).parent().next();
Evo šta će biti u HTML kodu:
Kada je kursor miša preko veze sa padajućom klasom, vraćamo se nazad sa parent() i zaustavljamo se na "li", a zatim sa next(), nalazimo se na željenom padajućem meniju, a "li" će već biti sa podvezama klasa (podvezama). Dakle, jQuery nam olakšava da saznamo koji padajući meni da prikažemo kada je kursor miša iznad određene veze.
Submenu.css((
pozicija: "apsolutno",
vrh: $(ovo).offset().top + $(ovo).height() + "px",
lijevo: $(this).offset().left + "px",
zIndeks:1000
});
Kod je veoma važan jer osigurava da se padajući meni prikaže tačno ispod određene veze. Ako je pozicija postavljena na apsolutnu, možemo pozicionirati element u bilo koje područje naše stranice. Zatim određujemo gornju poziciju veze preko koje kursor lebdi sa $(this).offset().top (ovo se odnosi na trenutnu stavku menija preko koje se kursor lebdi) i dodajemo joj vrijednost visine tako da se meni pojavi tačno ispod linka. Nešto slično radimo sa levim parametrom. Zatim koristimo z-index da bismo bili sigurni da je naš meni prikazan iznad ostalih elemenata.
Podmeni.stop().slideDown(300);
Naravno, možete koristiti druge opcije animacije kao što je fadeIn, animacija s vlastitim stilovima i tako dalje.
Sada moramo da se udaljimo od koncepta prikazivanja padajućeg menija i da ga sakrijemo. Potreban nam je sljedeći isječak koda:
Submenu.mouseleave(function()(
$(ovo).slideUp(300);
});
Da sakrijemo padajući meni, koristimo slideUp, antonim slideDown. Imajte na umu da je podmeni varijabla koju smo kreirali da definiramo određeni padajući meni.
Dakle, imamo atraktivan padajući meni na jednom nivou jQuery meni.
Danas bih želio napraviti izbor u vezi nove generacije navigacije za stranicu - menija preko celog ekrana. Koriste se u slučajevima kada sama navigacija nije na stranici, postoji samo jedno dugme koje, kada se klikne, otvara meni. Sličan princip se može vidjeti u -frameworku, kada navigacijska traka više ne stane, blok sa listom stavki menija jednostavno se sakriva. Na njegovom mjestu pojavljuje se dugme sa slikom, u pravilu, od tri pruge. Kada se pritisne, pojavljuje se cijeli meni. Na mnogim modernim web stranicama meni je trajno skriven čak i na velikim ekranima. Ovo se radi kako se stranica ne bi učitala. Iako to sada ne biste trebali raditi na svim svojim projektima. Ako je meni od sekundarnog značaja, možete ga sakriti, ali ako imate veliku stranicu sa složenom strukturom, ovu opciju je bolje ne koristiti. Dakle. Shvatili smo opšti princip rada, ali ova vrsta menija je sasvim standardna, želim nešto novo. Ne tako davno, počeo sam primjećivati stranice na kojima navigacija ne samo ispada, već otvara na cijelom ekranu u iskačućem prozoru. Nešto poput popularnih slajd panela, ali cijela stvar zauzima čitavu površinu radnog prostora. Iza sajtova, individualno jQuery dodaci i css3 rješenja, o čemu je, zapravo, ova tema.
Lično mi se jako sviđa ova implementacija navigacijskog menija, jer je zgodna za korisnike mobilnih uređaja i izgleda vrlo impresivno na velikim monitorima. Sites from menija preko celog ekrana sve je više besplatnih jQuery dodataka i koncept postepeno postaje trend.
Dakle. Za tvoju pažnju 20 jQuery dodataka menija preko celog ekrana u popup prozoru.
Push navigacija preko cijelog ekrana
Jedan od najboljih do sada, besplatan skripta za navigaciju preko cijelog ekrana. Kada pritisnete dugme "Meni", pojavljuje se navigacija, plus blok sa kontaktima, što je veoma zgodno za posetioca sajta, jer put do poziva postaje 1 klik manje. Želim napomenuti da skripta i na mobilnim uređajima blok sa kontaktima postaje pod navigacijom.Vrlo lijep dodatak dizajnu prozora je animirana SVG ikona. Podrazumevano, izgleda kao tri trake, ali kada se klikne, ikona se pretvara u strelicu, što pokazuje da se meni može sakriti.
Zaobljena animirana navigacija
Još jedan vrlo cool jquery skripta za navigaciju preko cijelog ekrana od istih programera kao i gornji dodatak. Ova skripta ima veoma cool i neobičan efekat izgleda. Kada pritisnete dugme menija, iz ikone, koristeći css3, emanira talas kroz ceo monitor, koji prerasta u pozadinu stavki menija. Isti efekat skrivanja.Ova navigacija radi dobro na mobilnim uređajima, ali s obzirom na to da je spawn efekat prilično težak, mislim da će biti spora na starijim telefonima (nisam testirao, pa će mi biti drago ako napišete svoje iskustvo u komentarima).
Perspective Page View Navigation
Još jedan spektakularan skripta menija preko cijelog ekrana. Kada pritisnete dugme menija, vidljivi deo stranice se pomera na stranu sa efektom , na oslobođenom prostoru se pojavljuje meni. Postoji nekoliko efekata animacije spawn.Nažalost, ne radi ispravno na mobilnim telefonima: ako ima mnogo stavki menija, a ne stanu na ekran, onda se vertikalno pomicanje ne pojavljuje i navigacija se jednostavno prekida.
Uvod i navigacija cijele stranice
Prilično jednostavno skripta menija preko cijelog ekrana. Ne mogu reći da je vrlo efikasan, ali će biti zgodan na mobilnim uređajima.
Fly Side Menu
Još jedan meni preko celog ekrana, u kojem je vidljivi dio sa 3D efektom pomjeren u stranu, ali već od drugih programera. Za razliku od prethodne slične skripte, ova bi trebala dobro funkcionirati na mobilnim uređajima, jer ako meni ne stane na ekran, pojavljuje se vertikalno skrolovanje.
Nakon što sam dobio nekoliko zahtjeva, odlučio sam napisati članak o tome kako napraviti padajući meni. Najbolji i najlakši način za kreiranje takvog menija je oslanjanje na jQuery.
Pogledajmo prvo HTML oznake.
Jednostavan padajući meni
sadržaja
Postoji jednostavna neuređena lista ul, njene li oznake su osnova navigacionog menija. Zatim dodajte kod u nastavku odgovarajućoj li oznaci u strukturu padajuće liste.
Ako budete oprezni, primijetit ćete dvije stvari:
1. Oznaka li ima padajuću klasu.
2. Roditeljska veza ima klasu ddIcon.
Padajuća klasa se koristi u jQueryju za prikaz/sakrivanje padajućeg menija. Druga klasa ddIcon se koristi za prikaz pokazivača na padajući meni.
Nema ništa posebno u vezi sa stilovima menija - uobičajeni stilovi su:
Kontejner ( širina: 960px; margina: 0 auto; padding-top: 50px; ) .container h1 (font-size: 30px; color: #666; margin-bottom: 1em; ) .container nav ( border-radius: 4px; background-color: #fff; visina: 37px; ) .container nav ul li (pozicija: relativna; float: lijevo; ) .container nav ul li a (font-size: 12px; text-decoration: none; font-weight: podebljano; transformacija teksta: velika slova; boja: #545454; padding: 13px 15px; prikaz: blok; granica desno: 1px čvrsta #f9f9f9; ) .container nav ul li a.ddIcon (pozadina: transparentni 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 -color: #cc333f; boja: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( position: absolute; background-color: # cc333f; padding: 15px 15px 20px; širina: 172px; lijevo: 0px; vrh: 38px; prikaz: nema; ) .container n av 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 ( color: #edc951; ) .container nav ul li .subNav h4 a span (float: right; font-size: 10px; : #fff; -moz-transition: boja 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 ; prikaz: blok; transformacija teksta: velika slova; boja: #fff; padding: 7px 15px; -moz-transition: boja 0,5s lakoća 0s; visina linije: 1,3; ) .container nav ul li .subNav:hover ( boja : #390206; ) .container .section (čisti: oba; padding: 10px; ) .container .section članak p (font-size: 16px; boja: #488fb8; line-height: 1.3; ) .container .section zaglavlje članka p ( padding-top: 20px; font-size: 20px; boja: #333; line-height: 1.3; margin-bottom: .4e m; )
Sada treba da se oživimo padajući meni. Najjednostavnija jQuery funkcija će nam pomoći u tome.
$(function()( $("li.dropdown").hover(function() (if ($("this:has(div.subNav)"))( $(".subNav").css((" display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":"relative ", "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 liste moguće je kreirati sopstveni padajući meni: unutar elementa li postaviti blok sa class.subnav i takođe dodeliti class.dropdown samom li.
