Puna me elementë të mbivendosur është e ndërlikuar sepse, të themi, kur lëviz një element prind me të, të gjithë fëmijët e tij lëvizin gjithashtu. Prandaj, ne do të zbatojmë disa truke që do të mbështesin përkthimet e dëshiruara 3D të nënmenuve dhe fëmijëve të tyre. Ideja kryesore është të rritet vlera e hedhur për të siguruar që nënnivelet të mos shfaqen kur të gjithë lëvizim pak për të ekspozuar skajet e elementeve mëmë. Sigurisht, kjo nuk është e nevojshme kur elementi prind mbulon nënmenynë.
Ju lutemi vini re se ne po përdorim vetitë CSS (transformim, tranzicion) që funksionojnë vetëm në shfletuesit modernë. Një shembull i një alternative për shfletues që nuk mbështesin mund të gjendet në fund të skedarit component.css, i cili thjesht tregon menunë e nivelit të parë. Ne bëjmë të njëjtën gjë në mungesë të JS.
Për menunë, ne kemi nevojë për strukturën e mëposhtme të mbivendosur:
Këtu, çdo nivel është i mbështjellë me një etiketë div me klasën e nivelit mp. Ne nuk do të mund të aplikojmë këtë lloj pozicionimi fiks në menu, pasi transformimet do ta bëjnë atë të sillet si një element i pozicionuar absolut, kështu që do të duhet të përdorim pozicionim absolut, i cili do të çojë në problemin e sjelljes së padëshiruar të faqes (menuja duke lëvizur dhe në varësi të lartësisë së dokumentit).
Për të shmangur lëvizjen e menysë dhe prerjen e saj nëse përmbajtja e faqes është shumë e shkurtër, ne do të përdorim një truk të vogël duke marrë strukturën e mëposhtme të faqes:
Tani ne caktojmë stilet e mëposhtme CSS për elementët:
Html, trupi, .container,. sfond: # 34495e;)
Kjo do të lejojë lëvizjen e përmbajtjes kur menyja e versionit celular të faqes është e mbyllur, dhe gjithashtu do të bëhet e barabartë me lartësinë e dritares së shfletuesit. Në këtë mënyrë, ne imitojmë atë që do të arrinte një pozicionim fiks. Vetë shtojca mund të quhet kështu:
mlPushMenu i ri (document.getElementById ("mp-menu"), document.getElementById ("shkaktues"));
Ose, nëse nënmenytë duhet të mbulojnë nivelet e mëparshme:
mlPushMenu i ri (document.getElementById ("mp-menu"), document.getElementById ("shkaktues"), (lloji: "cover"));
Shifter është një shtojcë jQuery për navigim të thjeshtë me rrëshqitje nga celulari. Shifter funksionon duke kontrolluar elementët e synuar në DOM dhe ngjarjet e detyrueshme me ta.
SlickNav
SlickNav është një shtojcë e përgjegjshme e menusë celulare për jQuery me veçori të tilla si mbështetja e menusë me shumë nivele, pajtueshmëria me shfletues, fleksibël, shënimi i thjeshtë dhe degradon në mënyrë të këndshme pa JavaScript.
Menutron
Menutron konverton menutë tuaja të navigimit nga një listë në një meny përzgjedhjeje kur shfletuesi ndryshon madhësinë. Në pajisjet celulare, menyja e përzgjedhjes nxjerr një kontroll origjinal, duke e bërë më të lehtë zgjedhjen e një artikulli.
Menu e përgjegjshme dhe e ndjeshme ndaj prekjes
Një tutorial për krijimin e navigimit me zbritje të përgjegjshme dhe miqësore me prekjen. Teknika përbëhet nga 3 pjesë kryesore, të cilat janë Navigimi i thjeshtë me zbritje i bazuar në HTML dhe CSS, zbatimi i Responsiveness duke përdorur pyetje mediatike dhe pranimi i tyre për pajisjet me ekran me prekje duke përdorur shtojcën super të vogël jQuery.
jQuery.mmenu
MMENU është një shtojcë jQuery për krijimin e aplikacioneve të buta, me rrëshqitje të dyfishtë për uebsajtin tuaj celular ose uebsajtin reagues.
Navobile
JQuery Navobile është një shtojcë jQuery që e bën të lehtë navigimin në celular. Navobile përdor CSS për të aplikuar përkthimet CSS3, zbulimin celular dhe rregullimin e pozicionit të navigimit.
FlexNav
FlexNav është një shembull i parë celular i përdorimit të pyetjeve të medias dhe të paturit të një menuje të këndshme me shtresa me mbështetje për prekjen, hapjen e pezullimit dhe aksesueshmërinë e skedës së hyrjes së tastierës.
Menyja e përgjegjshme e gatishmërisë së retinës
Meny e përgjegjshme me tre paraqitje për madhësi të ndryshme të shfletuesit. Menyja ndryshon automatikisht në një nga tre paraqitjet e ndryshme në varësi të madhësisë së dritares së shfletuesit: një version i rreshtit "desktop", një version i optimizuar për tabletë me dy kolona dhe një version celular me një lidhje menyje për të shfaqur dhe fshehur navigimin për ekranet e vegjël. Fonti u përdor si ikona për të shmangur turbullimin në rezolucione të ndryshme.
Menyja e hollë
slimMenu është një shtojcë e lehtë jQuery që është krijuar për të krijuar meny lundrimi të shpejta dhe me shtresa. Me slimMenu, nuk keni më nevojë të luftoni me kërkesat e medias për të krijuar meny të përgjegjshme, ose ndonjë shtesë tjetër të rëndë për krijimin e nënmenuve me shtresa. Është 100% i përgjegjshëm për celularin.
Menyja horizontale me rrëshqitje
Një rrëshqitje e thjeshtë, horizontale menyje me një plan urbanistik të miniaturës si një nënmenu. Menyja rrëshqet nga lart kur klikohet artikulli kryesor i menysë dhe nën-artikujt zhduken brenda. Pas klikimit të një artikulli tjetër, lartësia e nënmenusë do të rregullohet dhe përmbajtja do të zhduket brenda dhe jashtë kur kaloni.
Një nga fushat që kërkon vëmendje të veçantë kur zhvillon një dizajn ndërfaqeje për një pajisje celulare është menyja e navigimit. Nëse faqja ka shumë seksione ose faqe, kërkohet aftësi e veçantë për të vendosur të gjithë artikujt në një rezolucion të vogël të ekranit. Shumë shpesh, lundrimi shndërrohet në një tufë rreshtash ose një tufë butonash të grumbulluar njëri mbi tjetrin. Në këtë tutorial, ne do të shohim një nga mënyrat për të krijuar navigacion duke përdorur jQuery.
Detyrë
Pamjet e mëposhtme tregojnë situatat me shabllonet në ekranet e celularëve. Nëse navigimi ka 3 ose 4 butona, atëherë vendndodhja e tij do të ruhet në një rresht. Por kur menyja përmban 6 ose më shumë artikuj, rezultati është një bandë e shëmtuar.
Zgjidhje
Një mënyrë e zakonshme është konvertimi i navigimit në një listë rënëse bazuar në elementin e zgjedhur. Kjo zgjidhje ka disavantazhin që elementi i përzgjedhur nuk mund të stilohet me CSS. Shtojcat Javascript si Chosen ju lejojnë të personalizoni menynë, ose duhet të jeni të kënaqur me stilet e sistemit për listën rënëse. Gjithashtu, përdoruesi mund të ngatërrohet kur versioni me ekran të gjerë i strukturës së menusë transformohet në një listë rënëse në një pajisje celulare.
2) Dalje si bllok
Një mënyrë tjetër popullore është të formoni artikujt e menusë si artikuj të grumbulluar vertikalisht. Megjithatë, kjo qasje merr shumë hapësirë. Nëse navigimi përmban shumë butona, përdoruesi do të duhet të lëvizë nëpër një listë të gjatë për të arritur tek informacioni.
3) Ikona e menysë
Dhe metoda e fundit që do të shikojmë në tutorialin tonë është përdorimi i një ikonë menyje për të aktivizuar navigimin. Kjo qasje kursen hapësirë në faqe (e cila është e rëndësishme në një pajisje celulare) dhe ju jep kontroll të plotë mbi pamjen me CSS. Ikona e menysë dhe vetë navigimi mund të paraqiten në përputhje me stilin e përgjithshëm të faqes.
Navigimi celular i përfshirë me jQuery
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni navigacion për një ekran të vogël. JQuery do të përdoret për të përgatitur ikonën e menysë dhe për të aktivizuar navigimin. Nuk kërkohen etiketa shtesë HTML që lundrimi të funksionojë.
Një strukturë e thjeshtë do të përdoret për menunë tonë:
Menyja kërkon kod JavaScript për të funksionuar. Funksioni përgatit elementin
