Css jquery padajući izbornik na klik. Glatko otvaranje izbornika pomoću jQueryja. Padajući izbornik za navigaciju
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.
U ovom vodiču pokazat ćemo vam kako izraditi padajući izbornik na bočnoj traci kako biste svoju stranicu učinili još lakšom za navigaciju. Ova vrsta izbornika popularan je trend u modernom web dizajnu. Mnoge web stranice koriste ovu vrstu izbornika. Uz njegovu pomoć možete se riješiti kaosa na stranicama projekta, učiniti ga čitljivijim, fokusirajući pozornost korisnika na glavni sadržaj.
Ovo je sjajan način za postizanje minimalizma bez ometanja. Danas ćemo sami napraviti takav jelovnik.
Za izradu navigacijskog izbornika, prvo pogledajmo postavke:
Demonstracija izbornika animacije
Prvo trebate preuzeti Normalize.css i konfigurirati zadane stilove preglednika, pazeći da izbornik izgleda isto u svim preglednicima. Za prikaz strelice ispred stavki izbornika s podstavkama koristit ćemo FontAwesome. Za promjenu klasa u izborniku učitajte jQuery i premjestite sav prilagođeni jQuery kod u script.js. Posljednja poveznica je glavna tablica za web projekt.
Ikona hamburgeraIkona hamburgera čest je atribut navigacije web stranice. Često se stvara korištenjem fonta ikone kao što je FontAwesome, ali u ovom ćemo vodiču dodati malo animacije pa ćemo ga stvarati od nule. Naša ikona hamburgera je oznaka raspona koja sadrži tri div klase, prikazane kao horizontalne pruge.
Stilovi izgledaju ovako:
Toggle-button (položaj: fiksno; širina: 44px; visina: 40px; padding: 4px; prijelaz: .25s; z-index: 15; ) .toggle-button:hover (kursor: pokazivač; ) .toggle-button .menu -traka (položaj: apsolutni; granični radijus: 2px; širina: 80%; prijelaz: .5s; ) .toggle-button .menu-bar-top ( granica: 4px puna #555; granica-dno: nema; vrh: 0; ) .toggle-button .menu-bar-middle ( visina: 4px; boja pozadine: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; ) .toggle-button .menu-bar -bottom ( obrub: 4px solid #555; obrub-top: ništa; vrh: 22px; ) .button-open .menu-bar-top ( transformacija: rotacija(45deg) translate(8px, 8px); prijelaz: .5s; ) .button-open .menu-bar-middle ( transformacija: prijevod (230px); prijelaz: .1s ease-in; neprozirnost: 0; ) .button-open .menu-bar-bottom ( transformacija: rotacija (-45deg) translate(8px, -7px); prijelaz: .5s; )
Ikona ima fiksni položaj i ne mijenja se tijekom listanja po stranici. Također ima z-indeks 15, što znači da će uvijek biti iznad ostalih elemenata. Sastoji se od tri takta, od kojih svaki dijeli druge stilove. Tako ćemo svaku traku premjestiti u klasu.menu-bar. Preostale stilove premještamo u zasebne razrede. Čarolija se događa kada oznaci span dodamo još jednu klasu, koja je javna. Dodamo ga sa koristeći jQuery na sljedeći način:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open" ); ) ); ) );
Za one koji nisu upoznati s jQueryjem, inicijaliziramo varijablu s $toggleButton koja sadrži našu ikonu. Spremamo ga u varijablu bez potrebe za JavaScriptom. Zatim stvaramo slušatelja događaja koji osluškuje klikove na ikonu. Svaki put kada korisnik klikne ikonu hamburgera, slušatelj događaja aktivira funkciju toggleClass(), koja uključuje/isključuje class.button-open.
Nakon što se doda klasa .button-open, možemo je koristiti za promjenu načina na koji se elementi prikazuju. Koristimo funkcije CSS3 translate() i rotate() kako bismo gornju i donju traku rotirali za 45 stupnjeva i srednja traka pomaknuo udesno i nestao. Evo animacije koju možete prilagoditi:
Padajući izbornik za navigacijuSada kada imate svoju ikonu hamburgera, učinimo je korisnom i stvorimo padajući izbornik kada kliknete na nju. Ovako izgleda izgled izbornika:
Sada nećemo ulaziti u detalje o svakom stilu za ovaj jelovnik, već ćemo se usredotočiti na nekoliko važne točke. Prije svega, tu su div i klasa .menu-wrap. Pogledajte njegove stilove:
Prelom izbornika (boja pozadine: #6968AB; pozicija: fiksna; vrh: 0; visina: 100%; širina: 280px; margina-lijevo: -280px; veličina fonta: 1em; težina fonta: 700; preljev: auto ; prijelaz: 0,25 s; z-indeks: 10; )
Položaj je fiksan, tako da izbornik uvijek ostaje u istom položaju prilikom listanja po stranici. Visina od 100% omogućuje izborniku da zauzme sav okomiti prostor na stranici. Imajte na umu da je margin-left postavljena na negativan broj, jednako širini izbornika. To znači da će izbornik nestati iz prozora. Kako bismo ga ponovno učinili vidljivim, stvaramo drugu klasu preklopnika s jQueryjem. Naše JavaScript datoteka izgledat će ovako:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );
Dodali smo još jednu varijablu $menuWrap, koja sadrži omotač izbornika. Koristite isti rukovatelj događajima koji smo izradili ranije. Samo ovaj put mijenjamo dvije klase: jednu za gumb i jednu za ljusku izbornika. Vrijednost lijeve margine class.menu-show je 0, to će dodati efekt sjene.
Izbornik-show ( margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )
Podizbornici i povezniceMožda ćete primijetiti da jedna od stavki popisa ima class.menu-item-has-children, koji sadrži podizbornik. Osim toga, odmah ispod poveznice nalazi se oznaka span s klasom .sidebar-menu-arrow.
span ima pseudoelement ::after i sadrži FontAwesome strelicu. Prema zadanim postavkama, podizbornik je skriven i bit će vidljiv samo kada kliknete na strelicu. Evo kako to možemo učiniti s jQueryjem:
$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ); ) );
Kada kliknemo na strelicu, pozivamo funkciju, koja zauzvrat cilja na sljedeći element odmah nakon raspona (u našem slučaju, podizbornik) i čini ga vidljivim. Funkcija koju koristimo je slideToggle. Čini da se element pojavi i nestane. Funkcija u našem primjeru ima jedan parametar - trajanje animacije.
Stavke izbornika u primjeru imaju efekt lebdenja. Izrađuje se pomoću pseudoelementa ::after. Kod izgleda ovako:
Menu-sidebar li > a::after ( content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50% ); pozadinska slika: linearni gradijent (desno, prozirno 50,3%, #FFFA3B 50,3%); prijelaz: pozadinska pozicija .2s .1s ublažavanje; veličina pozadine: 200% auto; ) .menu-sidebar li > a:hover::after (background-position: -100% 0; )
Pseudoelement ::after sadrži element razine bloka na dnu svake veze s punom širinom i visinom od 0,15 em. Sve izgleda kao podcrtano. Posebnost je što ne primjenjujemo samo boju pozadine na crtu, već koristimo funkciju linear-gradient() na pozadinskoj slici. Iako je ova funkcija dizajnirana za stvaranje prijelaza boje, možemo promijeniti boju određivanjem željenih postotaka.
Bočna traka izbornika li > a::after ( pozadinska slika: linearni gradijent (desno, prozirno 50,3%, #FFFA3B 50,3%; )
Ovdje je polovica linije prozirna, a druga polovica žuta. Povećanjem veličine pozadine od 200%, udvostručujemo širinu našeg bloka. Sada prozirni dio zauzima cijelu širinu linka, a žuti dio se pomiče ulijevo i postaje nevidljiv. Mijenjamo položaj pozadine pri lebdenju na -100%. Sada žuti dio postaje vidljiv, a prozirni dio je skriven.
Umjesto prozirnog dijela možete koristiti bilo koju drugu boju. Također možete eksperimentirati s gradijentima.
Svaki od elemenata koje smo razmotrili djeluje kao jedinstvena cjelina. Takav izbornik možete izraditi koristeći bilo koji dizajn web stranice iz TemplateMonster zbirke. Kao što vidite, ovo je lakše učiniti nego što možete zamisliti. Sretno u izradi profesionalnih i korisniku prilagođenih web stranica!
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. 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 besplatnim izbornicima preko cijelog zaslona. jQuery dodaci također postaje sve veći i 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.
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 korištenje CSS opcije: pozicija, gore, lijevo, z-indeks.
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 dati izgled izbornik po vlastitom nahođenju), ali ovdje postoje i 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 (hide()) sve prethodne otvorenih izbornika prije nego kursor miša skoči na sljedeći link:
$(".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.
Također, ako nekoga zanima, možete pogledati prethodnu metodu s koristeći CSS koji je opisan u članku -
Sada na stvar. Kao iu prošlom članku, prije svega, napišimo HTML kod za naš izbornik. Šifra je ista kao u tom članku, da ne bude zabune i da bude razumljiviji. Izbornik s dvije stavke i obje imaju podizbornike.
- stavak 1
- Padajuća stavka 1
- Padajuća stavka 2
- Padajuća stavka 3
- točka 2
- Padajuća stavka 1
- Padajuća stavka 2
- Padajuća stavka 3
Ako imate takvu liniju ili sličnu koja je već prije uključila biblioteku, ne biste to trebali ponoviti.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), funkcija ( ) ($("ul", this).stop().slideUp(400); )); ));
U drugom redu skripte označavamo ID našeg izbornika. Ako koristite ovu metodu na svoj jelovnik, zatim prirodno promijenite ime u svoje. U ovom slučaju to je #slow_nav.
Također možete prilagoditi vrijeme animacije. U ovoj skripti vrijednost za otvaranje i zatvaranje je 400 milisekundi, što je 0,4 sekunde. Ako želite, možete je promijeniti na višu ili nižu vrijednost.
Zadnji korak je dodavanje stilova. Vrlo su slični stilovima iz prethodnog članka, samo im nedostaje CSS svojstva animacija.
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- decoration:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: nijedan; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; ) #slow_nav li ul li( background-color:#333; border- bottom:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( content:"" ; position:apsolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; )
Stilovima je dodan i jedan nova linija, s kojim skripta radi ispravno. Za element - #slow_nav li ul svojstvo display:none; . Ako ga ne dodate, padajući izbornik bit će u početku vidljiv i nestat će tek nakon što pomaknete kursor preko njega. Svi ostali stilovi su isti kao u prethodnom članku.
Kao i prethodna metoda, ova se može primijeniti ne samo na izbornike koje sami pišete, već i na iste dinamičke izbornike koje stvaraju sustavi za upravljanje sadržajem, kao što je WordPress. Da biste to učinili, morate malo dotjerati stilove i to je to. To jest, ne morate koristiti prvi HTML kod, samo stilove. U stilovima treba ID naziv #slow_nav zamijeniti onim što imaš i možda još neke sitnice dotjerati. Neću ići u detalje. Svaki slučaj zahtijeva osobni pristup, pa oprostite :)
To je sve, hvala na pažnji. 🙂