Rad s ugniježđenim elementima nije lak, jer, recimo, kada se roditeljski element pomiče s njim, pomiču se i svi podređeni elementi. Stoga ćemo primijeniti nekoliko trikova koji će podržati željene 3D prijevode podizbornika i njihove djece. Glavna ideja je povećati vrijednost prijevoda kako bi se osiguralo da se podrazine ne prikazuju kada sve pomaknemo malo kako bismo prikazali rubove roditeljskih elemenata. Naravno, to nije potrebno kada podizbornik zatvara roditeljski element.
Imajte na umu da koristimo CSS svojstva (transform , prijelaz) koja rade samo u modernim preglednicima. Primjer alternative za preglednike koji ne podržavaju može se naći na kraju datoteke component.css, koja jednostavno prikazuje izbornik prve razine. Isto radimo u nedostatku JS-a.
Za izbornik nam je potrebna sljedeća ugniježđena struktura:
Ovdje je svaka razina omotana u div oznaku s klasom mp-level. Nećemo moći primijeniti ovu vrstu fiksnog pozicioniranja na izbornik, budući da će transformacije učiniti da se ponaša kao apsolutno pozicionirani element, tako da ćemo morati koristiti apsolutno pozicioniranje, što će dovesti do problema neželjenog ponašanja stranice ( pomicanje po izborniku i ovisno o visini dokumenta).
Kako bismo izbjegli pomicanje izbornika i izrezivanje ako je sadržaj web-mjesta prekratak, primijenit ćemo mali trik koristeći 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;)
To će vam omogućiti pomicanje sadržaja kada se zatvori izbornik mobilne verzije stranice, a također će postati jednak visini prozora preglednika. Dakle, oponašamo ono što bismo postigli fiksnim pozicioniranjem. Sam dodatak može se nazvati ovako:
Novi mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"));
Ili, ako podizbornici trebaju pokrivati prethodne razine:
Novi mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"), (tip: "cover"));
Shifter je jQuery dodatak za jednostavnu mobilnu navigaciju koja se može uvući. Shifter radi tako da provjerava ciljne elemente u DOM-u i veže događaje na njima.
Slicknav
SlickNav je responzivni dodatak za mobilni izbornik za jQuery sa značajkama kao što su slojevita podrška za izbornike, kompatibilnost s više preglednika, fleksibilno, jednostavno označavanje i graciozno degradiranje bez JavaScripta.
Menutron
Menutron pretvara vaše navigacijske izbornike s popisa u izbornik za odabir kada se promijeni veličina preglednika. Na mobilnim uređajima izbornik za odabir povlači izvornu kontrolu, što olakšava odabir stavke.
Odgovarajući i dodirni izbornik
Vodič za stvaranje padajuće navigacije prilagođene osjetljivosti na dodir. Tehnika se sastoji od 3 glavna dijela koji su Jednostavna padajuća navigacija temeljena na HTML-u i CSS-u, implementacija Responsivenessa pomoću medijskih upita i njihova dostupnost za uređaje s dodirnim zaslonom pomoću super malenog jQuery dodatka.
jQuery.mmenu
MMENU je jQuery dodatak za stvaranje glatkog kliznog izbornika poput aplikacije 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 navigaciju za fiksiranje položaja.
FlexNav
FlexNav je slučaj upotrebe za medijske upite koji se koristi za mobilne uređaje i ima lijep slojevit izbornik s podrškom za dodir, otvaranje lebdećim prstom i pristupačnost unosa s tipkovnice s karticama.
Responzivni izbornik spreman za mrežnicu
Responzivni izbornik s tri izgleda za različite veličine preglednika. Izbornik se automatski mijenja u jedan od tri različita izgleda ovisno o veličini prozora preglednika: verzija retka "desktop", verzija optimizirana za tablete s dva stupca i mobilna verzija s vezom na izbornik za prikaz i skrivanje navigacije za manje zaslone . Font je korišten kao ikona kako bi se izbjeglo zamućenje u različitim razlučivostima.
slimMenu
slimMenu je lagani jQuery dodatak koji je napravljen za stvaranje brzih i višerazinskih navigacijskih izbornika na fly. Uz slimMenu više se nećete mučiti s medijskim upitima za stvaranje responzivnih izbornika ili bilo kojim drugim teškim dodacima za stvaranje ugniježđenih izbornika na više razina. 100% je osjetljiv na mobilne uređaje.
Horizontalni klizni izbornik
Jednostavan, vodoravni slajd izbornika s rasporedom rešetke minijatura kao za podizbornik. Izbornik klizi prema gore kada se klikne na stavku glavnog izbornika i podizbornici nestanu. Nakon klika na drugu stavku, visina podizbornika će se prilagoditi i sadržaj izblijediti i nestati kada uključite.
Jedno od područja koje zahtijeva posebnu pažnju pri dizajniranju sučelja za mobilni uređaj je navigacijski izbornik. Ako web-mjesto ima mnogo odjeljaka ili stranica, potrebna je posebna vještina kako bi se sve stavke smjestile na maloj razlučivosti zaslona. Vrlo često se navigacija pretvara u niz linija ili hrpu gumba naslaganih jedan na drugi. U ovom vodiču ćemo pogledati jedan od načina za stvaranje navigacije pomoću jQueryja.
Zadatak
Snimke zaslona u nastavku prikazuju situacije s predlošcima na zaslonima mobilnih uređaja. Ako navigacija ima 3 ili 4 gumba, tada će njezin izgled biti spremljen u jednom retku. Ali kada jelovnik sadrži 6 ili više stavki, ispada da je to ružna hrpa.
Riješenje
Jedan uobičajeni način je pretvaranje navigacije u padajući izbornik na temelju odabranog elementa. Ovo rješenje ima nedostatak da se element odabira ne može stilizirati pomoću CSS-a. Javascript dodaci poput Chosen omogućuju vam izmjenu izbornika ili ćete se morati zadovoljiti stilovima sustava za padajući izbornik. Također, korisnik može biti zaveden kada se širokozaslonska verzija strukture izbornika transformira u padajući popis na mobilnom uređaju.
2) Blok izlaz
Drugi popularan način je formiranje stavki izbornika kao vertikalnih blok elemenata. Međutim, ovaj pristup zauzima puno prostora u naslovima. Ako navigacija sadrži mnogo gumba, korisnik će se morati pomicati kroz dugi popis kako bi došao do informacija.
3) Ikona izbornika
I posljednji način na koji ćemo pogledati u našem vodiču je korištenje ikone izbornika za omogućavanje navigacije. Ovaj pristup štedi prostor na stranici (važno za mobilni uređaj) i daje vam potpunu kontrolu nad izgledom i dojmom s CSS-om. Ikona izbornika i sama navigacija mogu se prikazati u skladu s općim stilom stranice.
Mobilna navigacija omogućena uz jQuery
U ovom vodiču pokazat ćemo vam kako napraviti navigaciju na malom zaslonu. jQuery će se koristiti za pripremu ikone izbornika i omogućavanje navigacije. Nisu potrebne dodatne HTML oznake da bi navigacija radila.
Naš jelovnik koristit će jednostavnu strukturu:
Izbornik zahtijeva JavaScript kod za funkcioniranje. Funkcija priprema element
