Rad sa ugniježđenim elementima je težak jer, recimo, kada pomjerite roditeljski element s njim, pomiču se i svi njegovi potomci. Stoga ćemo primijeniti nekoliko trikova koji će podržati željene 3D prijevode podizbornika i njihove djece. Glavna ideja je povećati vrijednost cast kako bi se osiguralo da se podnivoi ne prikazuju kada se svi malo pomaknemo kako bismo otkrili rubove roditeljskih elemenata. Naravno, ovo nije neophodno kada roditeljski element pokriva podmeni.
Imajte na umu da koristimo CSS (transformacija, prijelaz) svojstva koja rade samo u modernim pretraživačima. Primer alternative za pretraživače koji ne podržavaju se može naći na kraju datoteke component.css, koja jednostavno prikazuje meni prvog nivoa. Isto radimo u nedostatku JS.
Za meni nam je potrebna sljedeća ugniježđena struktura:
Ovdje je svaki nivo omotan sa div oznakom sa klasom mp-level. Ovakvu vrstu fiksnog pozicioniranja nećemo moći primijeniti na meni, jer će transformacije učiniti da se ponaša kao apsolutno pozicionirani element, pa ćemo morati koristiti apsolutno pozicioniranje, što će dovesti do problema neželjenog ponašanja stranice (meni pomeranje i zavisno od visine dokumenta).
Kako bismo izbjegli pomicanje menija i njegovo isjecanje ako je sadržaj stranice prekratak, upotrijebit ćemo mali trik tako što ćemo uzeti sljedeću strukturu stranice:
Sada elementima dodjeljujemo sljedeće CSS stilove:
Html, tijelo, .container, .scroller (visina: 100%;) .scroller (overflow-y: scroll;) .scroller, .scroller-inner (pozicija: relativna;) .container (pozicija: relativna; overflow: skriveno; pozadina: # 34495e;)
Ovo će omogućiti pomeranje sadržaja kada se zatvori meni mobilne verzije sajta, a takođe će postati jednak visini prozora pretraživača. Na taj način imitiramo ono što bi se postiglo fiksnim pozicioniranjem. Sam dodatak se može nazvati ovako:
Novi mlPushMenu (document.getElementById ("mp-menu"), document.getElementById ("trigger"));
Ili, ako podmeniji treba da pokrivaju prethodne nivoe:
Novi mlPushMenu (document.getElementById ("mp-menu"), document.getElementById ("trigger"), (tip: "cover"));
Shifter je jQuery dodatak za jednostavnu mobilnu navigaciju. Shifter radi tako što provjerava ciljne elemente u DOM-u i obavezne događaje s njima.
SlickNav
SlickNav je prilagodljivi dodatak za mobilni meni za jQuery sa funkcijama kao što su podrška za više nivoa menija, kompatibilnost među pretraživačima, fleksibilno, jednostavno označavanje i graciozno degradiranje bez JavaScripta.
Menutron
Menutron konvertuje vaše navigacione menije sa liste u meni za izbor kada se promeni veličina pretraživača. Na mobilnim uređajima, izbornik za odabir izvlači izvornu kontrolu, što olakšava odabir stavke.
Odaziv i meni osjetljiv na dodir
Vodič za kreiranje padajuće navigacije prilagođene dodiru. Tehnika se sastoji od 3 glavna dijela, a to su Jednostavna padajuća navigacija zasnovana na HTML-u i CSS-u, implementacija Responsiveness-a koristeći medijske upite i njihovo prihvatanje za uređaje sa ekranom osjetljivim na dodir pomoću super malenog jQuery dodatka.
jQuery.mmenu
MMENU je jQuery dodatak za kreiranje glatkih, dvostrukih kliznih menija za vašu mobilnu ili responzivnu web stranicu.
Navobile
JQuery Navobile je jQuery dodatak koji olakšava mobilnu navigaciju. Navobile koristi CSS za primjenu CSS3 prijevoda, detekciju mobilnih uređaja i fiksiranje položaja u navigaciji.
FlexNav
FlexNav je prvi mobilni primer korišćenja medijskih upita i ima lep slojevit meni sa podrškom za dodir, otvaranje lebdećeg miša i pristupačnost karticama za unos sa tastature.
Responsive Retina-Ready meni
Prilagodljiv meni sa tri izgleda za različite veličine pretraživača. Izbornik se automatski mijenja u jedan od tri različita izgleda u zavisnosti od veličine prozora pretraživača: verzija u redu "desktop", verzija optimizirana za tablet sa dvije kolone i mobilna verzija s vezom na meni za prikaz i sakrivanje navigacije za male ekrane. Font je korišten kao ikone kako bi se izbjeglo zamućenje pri različitim rezolucijama.
slimMenu
slimMenu je lagani jQuery dodatak koji je napravljen za kreiranje brzih i slojevitih navigacijskih menija u pokretu. Sa slimMenu, više ne morate da se borite sa zahtjevima medija za kreiranje responzivnih menija ili bilo kojih drugih teških dodataka za kreiranje slojevitih ugniježđenih menija. 100% odgovara mobilnim uređajima.
Horizontalni klizni meni
Jednostavan, horizontalni slajd menija sa rasporedom mreže sličica kao podmeni. Meni klizi sa vrha kada se klikne na stavku glavnog menija i podstavke nestanu. Nakon klika na drugu stavku, visina podmenija će se prilagoditi i sadržaj će nestati kada se prebacite.
Jedna od oblasti koja zahteva posebnu pažnju pri razvoju dizajna interfejsa za mobilni uređaj je navigacioni meni. Ako stranica ima mnogo odjeljaka ili stranica, potrebna je posebna vještina za postavljanje svih stavki u maloj rezoluciji ekrana. Vrlo često se navigacija pretvara u gomilu linija ili gomilu dugmadi naslaganih jedno na drugo. U ovom vodiču ćemo pogledati jedan od načina za kreiranje navigacije koristeći jQuery.
Zadatak
Snimke ekrana ispod pokazuju situacije sa šablonima na ekranima mobilnih telefona. Ako navigacija ima 3 ili 4 tipke, tada će njena lokacija biti sačuvana u jednom redu. Ali kada jelovnik sadrži 6 ili više stavki, rezultat je ružna gomila.
Rješenje
Jedan uobičajeni način je pretvaranje navigacije u padajuću listu na osnovu odabranog elementa. Ovo rješenje ima nedostatak što se element odabira ne može stilizirati pomoću CSS-a. Javascript dodaci kao što je Chosen vam omogućavaju da prilagodite meni ili morate biti zadovoljni sistemskim stilovima za padajući meni. Također, korisnik može biti zbunjen kada se široka verzija strukture menija transformiše u padajuću listu na mobilnom uređaju.
2) Izlaz kao blok
Još jedan popularan način je oblikovanje stavki menija kao okomito naslagane stavke. Međutim, ovaj pristup zauzima mnogo prostora. Ako navigacija sadrži mnogo dugmadi, korisnik će morati da skroluje kroz dugu listu da bi došao do informacija.
3) Ikona menija
I posljednja metoda koju ćemo pogledati u našem vodiču je korištenje ikone izbornika za omogućavanje navigacije. Ovaj pristup štedi prostor na stranici (što je važno na mobilnom uređaju) i daje vam potpunu kontrolu nad izgledom pomoću CSS-a. Ikona menija i sama navigacija mogu biti predstavljeni u skladu sa opštim stilom sajta.
Mobilna navigacija uključena u jQuery
U ovom vodiču ćemo vam pokazati kako da kreirate navigaciju za mali ekran. JQuery će se koristiti za pripremu ikone menija i omogućavanje navigacije. Nisu potrebne dodatne HTML oznake da bi navigacija radila.
Za naš meni koristit će se jednostavna struktura:
Za funkcionisanje menija je potreban JavaScript kod. Funkcija priprema element
