jquery okomiti padajući izbornik. Jednostavan padajući izbornik temeljen na jQueryju. Padajući izbornik za navigaciju
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. Ispada kada se pritisne puni jelovnik. 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. S opći princip posao sređen, ali ovaj tip Jelovnik je prilično standardan, ž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. Počela su se pojavljivati zasebna mjesta jQuery dodatak s 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 transformira u strelicu, što pokazuje da se izbornik može sakriti Zaobljena animirana navigacija Još jedna vrlo zgodna jquery skripta navigacija 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, na Mobiteli ne radi ispravno: ako postoji mnogo stavki izbornika i ne stanu na zaslon, tada se okomito pomicanje ne pojavljuje i navigacija se jednostavno prekida.
Vrlo često u predlošcima možete pronaći elemente padajuće navigacije. Programeri koriste ovu vrstu skrivenog izbornika za prikaz dodatnih skrivenih poveznica koje su tematski povezane s glavnom stavkom. Možete pronaći primjere kliznih ploča ili raznih izbornika u stilu harmonike koji provode ovaj princip navigacije.
No, u ovom vodiču izgradit ćemo jednostavan padajući izbornik koristeći jQuery. Radit će pomoću tehnike animacije za generiranje odgođenih efekata. CSS3 efekti prijelaza također se primjenjuju zajedno s JavaScript kodom. Rezultat je predložak za navigaciju web stranice.
HTMLNajprije izradimo osnovni HTML5 predložak. Potreban Najnovija verzija jQuery, koji dobivamo od Google API-ja. Također dodajemo stilsku datoteku styles.css, koja će biti predstavljena u nastavku:
Horizontalno navigacijska traka| Web stranica s materijalima
Sada pogledajmo strukturu koja je izgrađena oko neuređenog popisa na vrhu stranice. Cijeli popis je smješten u HTML5 element za bolje SEO rezultate.
Struktura koda je prilično jednostavna. Svaka stavka popisa uključuje efekt isticanja kada se kursor miša postavi iznad nje. Svi interni UL elementi sadržani su unutar izvorne stavke popisa, tako da se fokus unosa ne gubi prilikom pomicanja na stavke padajućeg izbornika.
Stilovi navigacijeList stilova sadrži kod za vraćanje vrijednosti svojstava na zadane. Mnogi programeri uključuju datoteku Erica Meyea, ali za našu upotrebu ona je preglomazna. Osim toga, kod je pohranjen na drugom poslužitelju, što samo po sebi i jest loša odluka u ovom slučaju.
Html, tijelo, div, raspon, aplet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, citat, pre, a, skraćenica, akronim, adresa, veliki, citat, kod, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, obrazac, oznaka, legenda, tablica, natpis, tbody, tfoot, thead, tr, th, td, članak, na stranu, platno, detalji, ugraditi, figura, figcaption, podnožje, zaglavlje, hgroup, izbornik, nav, izlaz, ruby, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font- izglađivanje: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html ( visina : 101%; ) tijelo (pozadina: #eaeaea url("images/bg.png"); veličina fonta: 62,5%; visina retka: 1; obitelj fonta: Arial, Tahoma, sans-serif; padding-bottom : 60px; ) članak, na stranu, detalji, naslov slike, slika, podnožje, zaglavlje, hgrupa, izbornik, navigacija, odjeljak ( prikaz: blok; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) strong ( font -weight: bold; ) table ( border-collapse: collapse; border-spacing: 0; ) img ( border: 0; max-width: 100%; )
U kodu postoji zanimljivo svojstvo -webkit-font-smoothing. Dizajniran je za uglađivanje fontova prilikom pokretanja koda u preglednicima koji koriste Mac OS X ili iOS.
Sada prijeđimo na naš jelovnik.
#ddmenu ( display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15) ); box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); kursor: pokazivač; obris: ništa; težina fonta: podebljano; boja: #8aa8bd; ) #ddmenu li ( prikaz: blok; pozicija: relativno; float: lijevo; veličina fonta: 1.45em; text-shadow: 1px 1px 0 #fff; border-desno: 1px solid #dae0e5; ) #ddmenu li a ( display: block; float: lijevo; padding: 0 12px ; line-height: 78px; font-weight: bold; text-decoration: none; color: #6c87c0; -webkit-transition: sve 0,2 s linearno; -moz-transition: sve 0,2 s linearno; -o-transition: sve 0,2 s linearno; prijelaz: sve 0,2 s linearno; ) #ddmenu li:hover > a (boja: #7180a0; pozadina: #d9e2ee; ) #ddmenu ul (pozicija: apsolutna; vrh: 88px; širina: 130px; pozadina: # fff; prikaz: ništa; margina: 0; ispuna: 7px 0; stil popisa: nijedan; radijus granice: 3px; granica: 1px čvrsta rgba(0, 0, 0, 0.2); sjena okvira: 0 0 5px rgba (0, 0, 0, 0,2); )
Dodajemo selektor #ddmenu ul za odabir svih unutarnjih elemenata u svakoj stavci popisa, jer je važno odrediti udaljenost za njih pomoću apsolutnog pozicioniranja. Također dodajemo linearni prijelaz za sve veze, koji se pojavljuje kada prijeđete pokazivačem iznad njih.
Sada pogledajmo stvaranje indeksa gornjeg elementa. Formira se korištenjem svojstva rotacije i univerzalnog okvira s tamna pozadina za sjenu. Korištenjem offset pozicioniranja, jedan element naše strukture postavlja se iznad drugog i tvori vizualni prikaz pokazivača na padajućem izborniku.
#ddmenu ul:after ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent; ) #ddmenu ul:before ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 4px; border-width: 0 10px 10px 10px; border-style : solid; border-color: rgba(0, 0, 0, 0.1) transparent; ) #ddmenu ul li ( display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff ; ) #ddmenu ul li a ( display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; - o-prijelaz: svih 0,2 s linearno; prijelaz: svih 0,2 s linearno; ) #ddmenu ul li a:hover ( pozadina: #e9edf3; )
JavaScript$(document).ready(function())( $("a").on("click", function(e)( e.preventDefault(); )); $("#ddmenu li").hover( function () ( clearTimeout($.data(this,"timer")); $("ul",this).stop(true,true).slideDown(200); ), function () ( $.data(this) , "timer", setTimeout($.proxy(function() ( $("ul",this).stop(true,true).slideUp(200); ), this), 100)); )); )) ;
Prvi dio koda presreće klikove na poveznice i zaustavlja njihovu obradu prema zadanim postavkama (učitavanje stranica na URL-u).
Drugi dio koda radi sve magijske radnje. Prilažemo rukovatelj događajima za proces lebdenja miša iznad stavke popisa. Rukovatelj će zaustaviti trenutno aktivnu animaciju i ispisati novi sub koristeći .slideDown() . Također smo postavili malu odgodu tako da odgovara samo na stvarni odabir stavke.
Ako se sve takve stavke postave jedna ispod druge, možda će izbornik postati toliko velik da će njegova visina premašiti visinu glavnog sadržaja. Izvana neće biti baš lijepo, a osim toga, teško je pronaći nešto na takvom kontinuiranom popisu. Da biste sve grupirali i smanjili, morate stvoriti nešto poput kliznog izbornika.
Princip kliznog izbornika je da su stavke izbornika podijeljene u grupe, a te grupe su skrivene, vidljiv je samo naziv grupe. Kada kliknete na naziv, pojavljuje se popis određenog broja stavki.
Kako napraviti klizni izbornik? jQuery će nam u tome pomoći. S njim će sve raditi glatko i lijepo, kao u gornjem primjeru. Počnimo implementirati klizni izbornik i dovršimo nekoliko stavki.
jQuery skriptaKao i obično, kada radite s jQueryjem, trebate uključiti njegovu biblioteku. Sve je kao i obično, u zaglavlju ili podnožju uspostavljamo vezu, osim, naravno, ako to prije niste učinili za druge skripte.
Nakon knjižnice dodajemo skriptu. koji će izvoditi animaciju. Bit će 3 skripte, svaka od njih izvodi animaciju na drugačiji način.
$(document).ready(function() ( $("#menu ul").hide(); $("#menu li span").click(function() ( $("#menu ul:visible") .slideUp("normal"); if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) ( $ (ovo).next().slideDown("normal"); ) )); ));
Ova skripta funkcionira na način da kada kliknete na naziv kategorije pojavi se lista, ali kada kliknete na drugu kategoriju ona se počinje otvarati, dok se prva zatvara. Odnosno, uvijek je otvorena samo jedna kategorija. Ako vam je potrebno da se otvorene kategorije ne zatvaraju automatski, zamijenite skriptu s novom koja je navedena u nastavku.
$(document).ready(function() ( $("#menu ul").hide(); $("#menu li span").click(function() ( $(this).next().slideToggle ("normalno"); )); ));
Postoji još jedna skripta kojom možete zamijeniti glavnu. Njegov je trik u tome što izbornik klizi van kada se zadrži pokazivač. Nema potrebe klikati, samo prijeđite pokazivačem iznad naziva kategorije i to je to. Stoga odaberite skriptu koja vam najviše odgovara.
$(document).ready(function() ( $("#menu ul").hide(); $("#menu li").hover(function() ( $(this).children("ul") .slideToggle("normalno"); )); ));
HTML označavanjeSada, na pravom mjestu na vašoj web stranici, trebate prikazati HTML oznake. Pa, ili malo ponovite svoj tako da postane sličan primjeru.
Nema ništa komplicirano, sve je organizirano pomoću ul-lista.
CSS stiloviI na kraju, kako bismo postavili ispravan izgled jelovnika, moramo odrediti stilove. Ako vam ovo nije prvi put da radite s CSS-om, stilove možete jednostavno prilagoditi sebi.
Ul#menu, ul#menu ul( list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); - moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);) ul#menu a,ul#menu span (display: block; text-decoration: none;) ul#menu li (margin-top: 1px;) ul#menu li a,ul#menu li span( background: #1ba600; color: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(background: #333;) ul#menu li ul li a( background: #eee; color: #000; padding-left: 20px;) ul# izbornik li ul li a:hover(pozadina: #ddd;)
Ništa više nije potrebno. Ova metoda nije jako kompliciran i ima nekoliko vrsta implementacije, sve ovisi o skripti koju odaberete.
To je sve, hvala na pažnji. 🙂
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, ostaje nam mali detalj: zapravo, css stilovi. Možete to učiniti po svom ukusu, u primjeru koji 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 sadržaja: +/- kada je zatvoreno/ otvori izbornik, ali možete dodati sliku ili bilo koji drugi dizajn. 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. 1. Vertikalni svijetli jQuery izbornik 2. Cool efekt. Plesni meni. 4. Padajući popis pomoću jQueryja
Izvrstan stil elementa sučelja u obliku padajućeg popisa.
Kada prijeđete mišem iznad gumba, na vrhu se pojavljuje ploča.
6. jQuery dodatak “MobilyBlocks” za prikaz radijalnog izbornika 7. Izbornik pomoću spriteovaAnimirani javascript izbornik s efektom sjaja.
Svjež, lijep izbornik koji koristi jQuery.
9. jQuery izbornik “GarageDoor” 10. jQuery izbornik okomitog pomicanjaProvedba jelovnika sa veliki iznos bodova. Pomiče se kada kursor miša pomaknete gore ili dolje.
11. Dizajn padajuće liste jQuery 12. Dodatak za navigaciju po straniciGlatko pomicanje do željenog odjeljka na stranici. jQuery dodatak za navigaciju na jednoj stranici.
13. Dodatak “Izbornik animiranog sadržaja”Novi jQuery dodatak. Izvrsna implementacija animirane navigacije web stranice. Prilikom prolaska kroz stavke izbornika pojavljuje se blok s opisom i mogućim poveznicama, a ovisno o odabranoj stavci mijenja se pozadina stranice koja se proteže na cijeli zaslon bez obzira na veličinu prozora preglednika. Obavezno pogledajte demo stranicu.
14. jQuery dodatak izbornika “Slatki jelovnik”.Animirani izbornik sa skočnim stavkama.
15. Popravljeni jQuery izbornikKada se pomičete prema dolje po stranici, izbornik ostaje fiksiran na vrhu zaslona.
16. Klizni izbornici za pomicanjeImplementacija okomitog izbornika s velikim brojem stavki. Pomicanje kroz stavke vrši se pomoću kotačića miša ili pomoću poveznica “Prethodno” i “Sljedeće”.
17. Moderan CSS3 izbornik 18. Novi CSS3 izbornik u Apple stiluNovi jelovnik u Apple stilu. Izgleda tamnije nego prije, ali ništa manje slatko.
19. Izvorni jQuery izbornikPadajući izbornik s efektom pozadine. Podstavke izbornika šire se prema gore. Kada prijeđete pokazivačem iznad stavke izbornika, pozadinska slika se mijenja.
20. Animirani izbornik s jQueryjemAnimirani izbornik. Stavke izbornika prikazane su u obliku ikona i opisa. Nekoliko sjajnih efekata kada mišem prelazite preko stavke izbornika. Postoji 8 efekata, da biste ih vidjeli sve - slijedite veze Primjer1-Primjer8 na demo stranici.
21. “Scrolling menu” XML izbornik s pomicanjemVertikalni i vodoravni pomični izbornik. Dobra odluka s velikim brojem stavki na jelovniku.
22. Kontekstni izbornik na web stranici koristeći jQueryIzbornik se pojavljuje kada desnom tipkom miša kliknete određeno područje.
23. Kružni dvorazinski izbornik za stranicuKada odaberete stavku izbornika, stavke podizbornika prikazuju se s desne strane.
24. jQuery CSS3 izbornik s efektom zamućenja “Blur Menu” CSS3Izvorni jQuery CSS3 izbornik dolazi u 7 različitih stilova. Kada mišem prijeđete preko jedne od stavki izbornika, ostale se zamagljuju.
25. Nekoliko spektakularnih animiranih jQuery CSS3 izbornika10 kreativnih animiranih izbornika. Horizontalni i okomiti CSS3 izbornici s raznim efektima i prijelazima.
U arhivi se nalazi i original PSD datoteka Jelovnik.
27. MagicLine izbornikPozadina ili podcrtavanje stavke izbornika prati miš s malim kašnjenjem, dok pozadina glatko mijenja svoju boju dok se pomiče od stavke do stavke. Vrlo lijep učinak, izgleda neobično. Pažnja: efekt ne radi u operi
28. Slikovni mjehurićiIzvrstan učinak kada prijeđete mišem preko jedne od slika. Učinak donekle podsjeća na gore opisani jQDock.
31. Zanimljivi jQuery izbornici s raznim efektimaVodoravni, okomiti izbornik. Zanimljivi efekti.
32. Sjajan jQuery izbornik u Apple stilu 34. jQuery izbornik sa zanimljivim efektom 36. Svježi izbornik sa zanimljivim efektom u jQueryjuVrlo zanimljiv učinak. Savršeno za dizajniranje portfelja web stranica.
Zanimljiv učinak sličica koje iskaču pri lebdenju.
40. Padajući popis s automatskim pomicanjemLijep efekt prijelaza između stavki.
42. Sjajan jQuery izbornik 43. Prekrasan veliki jQuery izbornik 44. Pomicanje jQuery izbornikaStavke izbornika prikazane su u obliku sličica.
46. jQuery radijalni navigacijski izbornik 47. CSS i jQuery izbornikNavigacijska traka s okvirom za pretraživanje koji postaje proziran dok se pomičete prema dolje po stranici.
48. Horizontalni jQuery izbornik 49. Okomiti jQuery izbornikIzvrstan okomiti izbornik. Kada zadržite kursor, pojavljuje se stavka izbornika.
50. Horizontalni jQuery izbornikZanimljiv efekt kada kursor pređete preko stavke izbornika.
52. jQuery padajući izbornikKada prijeđete mišem preko izbornika, pojavit će se njegove stavke. Stavke koje se pojavljuju prikazane su u obliku luka, čiji radijus možete postaviti prilikom konfiguracije dodatka. U nekim preglednicima nećete vidjeti lučni prikaz, izbornik će biti prikazan ravno, ali to ipak neće pokvariti opći dojam ove implementacije jQuery izbornika.
53. CSS i jQuery navigacijska trakaZanimljiv efekt kada mišem prijeđete preko stavke izbornika.
54. jQuery skočni panelSvježi animirani izbornik u sivim tonovima.
58. Navigacija stranicama u stupcima pomoću jQueryjaZanimljivo rješenje za navigaciju, koje je predstavljeno u obliku okomitih pruga. Kada prijeđete mišem preko ovih traka, pojavit će se slika za stavku i popis podizbornika. Kada kliknete na stavku podizbornika, pojavljuje se stranica s opisom. Ova implementacija savršena je za promotivne stranice ili prezentacije. Obavezno pogledajte demonstraciju dodatka.
59. jQuery navigacija na straniciNavigacija web stranice predstavljena je u obliku 4 slike, kada prijeđete iznad njih primijetit ćete zanimljiv animirani efekt.
60. Navigacijska traka pomiče se sadržajemNavigacijska ploča. Klikom na strelicu pomiče se stranica. Navigacija se pomiče zajedno sa sadržajem stranice.
61. jQuery panel s raznim društvenim servisima