Kako napraviti adaptivni izbornik? primjeri

Prilagodljiv izbornik za moderan site nije samo luksuz, već nužnost. Bogatstvo suvremenih uređaja zahtijeva webmastere takvog rasporeda, što bi bilo logično prikazano na zaslonima različitih rezolucija. U nekim je slučajevima stvaranje prilagodljivog izbornika puno teže nego sam dizajn, pa je potrebno razmotriti ovo pitanje.

Izbornik za veliki zaslon

Razumjeti cjelokupnu shemu nametanje prilagodljivog izbornik, prvo morate stvoriti strukturu izbornika u HTML-u i stilizirati pomoću CSS-a. Zatim, na temelju primljenog materijala, možete poboljšati prilagodljivi predložak. Dakle, struktura HTML-a izgledat će ovako.

Rezultat izbornika trebat će dodati CSS stilove. Oni bi trebali odrediti veličinu fonta i boju, pozadinu, blokiranje pozicioniranja.

Postupak prilagodbe

Stvaranje jednostavne funkcije za konvencionalni zaslon računala je jednostavna stvar, a to se može vidjeti u primjeru. Adaptivni izbornik za web mjesto kreiran je samo kada postoji nešto za rad, tj. Kada su navigacijske točke već dodane. Najoptimalnija varijanta izbornika za mobilne uređaje i tablete bit će ikona hamburgera - kvadratna kutija u kojoj se nalaze tri vertikalne značajke. Kad pritisnete, otvorit će se sve stavke izbornika. Da biste izradili takvu navigaciju, morate dodati oznake u HTML dokument.

Zatim ćete morati dodati odgovarajuće stilove tim oznakama kako biste dobili vizualno privlačan i čitljiv izbornik. Pored vizualizacije ikona navigacije i izbornika, u skladu s tim morate urediti položaj slike. Dakle, unosite uvjet menu_icon span: nth-child (1) {top: 0 px} -. To jest, uvlačenje slike odozgo će biti nula piksela. Slično tome, morate navesti vrijednosti za druge strane.

Sada je adaptivni izbornik gotovo spreman. Vrijedno je obratiti pažnju na stanje prikaz: nema. Prema zadanim postavkama, ikona izbornika neće biti vidljiva na web mjestu, tako da u CSS dokumentu morate dodati dodatni razred sa sljedećim uvjetima: .menu__icon {display: inline-block-}. To će učiniti navigaciju vidljivom.

Osim toga, morate dodati zadatak u kaskadni stilski list, koji će prema potrebi sakriti predmete i potpoglavlja. Da biste to učinili, u CSS-u trebate postaviti fiksnu stavku izbornika, organizirati prikaz i poravnanje. Stavke su skrivene pomoću uvjeta preljeva: auto-opacity: 0-z-index: 1000. Također možete dodati stavku menu__links-item koja određuje stil stavki izbornika, ali to je u opciji razvijatelja.

Završni dodir

Dakle, adaptivni izbornik na CSS-u gotovo je gotovo. Kako biste je prikazali kada kliknete ikonu, trebate dodati funkcije. Radi jednostavnosti, bolje je koristiti jQuery, ali ako želite, možete stvoriti čisti jаvascript. I tamo i tamo će se koristiti isti uvjet:

• toggleClass (`menu_state_open`) -}) () () () () () -}) -}) (jQuery).

Time se dovršava izgled adaptivne navigacije. Ali to je samo jedna od nekoliko mogućnosti za stvaranje ove vrste funkcionalnosti pa je vrijedno razmotriti ostatak. Barem nekoliko njih.

Bez mijenjanja standarda

Većina korisnika Interneta očekuje da će vidjeti navigacijsku traku pri vrhu web sučelja. To je već postalo vrsta standarda, tako da prilagodljivi vodoravni izbornik treba imati pristojan izgled. To se može učiniti pomoću CSS-a, kao u primjerima koji su gore prikazani, i povezivanjem skripte rukovatelja. Općenito, stvaranje prilagodljivog izbornika sastoji se od 3 koraka:

1. Pisanje HTML oznaka
2. Njihov stil s kaskadnim stilom (CSS).
3. Prilagodba već postojećeg izbornika.

Naravno, sve web-lokacije imaju vlastite trake izbornika, ali ako je resurs izrađen na CMS-u, bit će lakše izraditi novi adaptivni izbornik.

bootstrap

Stvaranje prilagodljive funkcionalnosti nije tako ozbiljan problem ako koristite alat Bootstrap. Postoje unaprijed postavljeni predlošci za izradu vodoravnog izbornika. Trebate se samo povezati s datotekom resursa bootstrap.js. Ovim okvirom webmaster može kreirati navigaciju bilo koje složenosti. Izrađen je adaptivni izbornik s programom Bootstrap pomoću specifičnog koda.

Značajke metode

Neka ovaj kod bude težak, ali razumljiv. Valja napomenuti da glavnu ulogu ovdje igra oznaka nav, koja je odgovorna za kreiranje plovidbe i njezinog izgleda. Ovdje su i kontejneri spremnik fluida i kontejner, koji određuju širinu stavki. Pomoću njihove pomoći možete iz izbornika proširiti zaslone različitih rezolucija ili ih ostaviti fiksiranima.

Važnu ulogu u stvaranju prilagodljive funkcionalnosti ovdje igraju klase kolaps i Navbara-kolaps, koji su odgovorni za stil. Izbornik se stvara pisanjem popis s grafičkim oznakama stavke koje su postavljene vodoravno.

Ako primijenite taj kôd za stvaranje navigacije, na širokim zaslonima izgledat će kao vodoravni banner. U početku će biti ime resursa, a zatim stavke u strogo specificiranom slijedu. Na uskim ekranima prikazivat će se samo naziv web mjesta i ikona hamburgera, kada kliknete na koje se stavke izbornika prikazuju kao okomiti popis.

Padajući izbornik

Bootstrap resurs će biti odličan pomagač za kreiranje prilagodljivog padajućeg izbornika. Da biste to učinili, jednostavno zamijenite oznaku

To se može učiniti za jednu točku, a za nekoliko. U blizini položaja s padajućim podstavama bit će strelica koja pokazuje. Kada kliknete, pojavit će se popis stvoren. Ako je navigacija prikazana na malom zaslonu, stavka s padajućim popisom također će biti označena strelicom, ali s pravcem na desnoj strani. Kada pritisnete, pojavit će se još jedan vertikalni popis pod-stavki.

Višerazinski izbornik

Međutim, za stvaranje padajućeg popisa ne samo uz pomoć Bootstrap. Ako ova knjižnica nije povezana, možete izraditi prilagodljivi višerazinski izbornik pomoću HTML i CSS, a zatim spojite funkciju PHP.

Najprije morate izraditi nebrojeni popis u HTML datoteci koja sadrži druge popise. Da biste to učinili, upotrijebite standardne oznake

i
• . Ne zaboravite na formiranje klase, koje će kasnije biti obrađene kaskadnim stilskim stilom CSS. Da bi to bilo jasnije, vrijedno je dati mali primjer pisanja popisa i stvaranja nastave.

Animacija prilagodljivog padajućeg izbornika navedena je pomoću stila kaskadnog stila. Ovdje morate odrediti parametre za izbornik kad se zaslon smanji za 50, 75 i 25%. Ovaj pristup stvaranju prilagodljive funkcionalnosti pruža kompetentan izgled, u kojem izbornik ne "izlazi".

I na kraju, morate unijeti funkciju u dokumentu.

Ako web-mjesto ne uzima u obzir upotrebu nekih drugih funkcija osim ove, još uvijek treba stvoriti zaseban dokument skripte za njega. Ako ga napišete u običan HTML, jednostavno će se pojaviti u prozoru preglednika kao dio teksta i neće funkcionirati.

jQuery

Također je izvrsno rješenje stvaranje navigacijske trake na JQuery dodatku. Adaptivni izbornik za ovu uslugu je samo nekoliko minuta. Čep se može preuzeti na Internetu, ima jednostavno i intuitivno sučelje koje je jednostavno i jednostavno za korištenje. Dakle, ne bi trebalo biti problema s povezivanjem stylesheet.

Nakon što je stilski list povezan, morate napisati skriptu kako biste stvorili prilagodljivu navigaciju.

Nakon toga je nužno napraviti navigaciju, ako već nije tamo. Ovdje sve djeluje prema principu: "Sve genijalno je jednostavno". U HTML dokumentu morate stvoriti popis s grafičkim oznakama u oznaci nav. Možete upotrijebiti gornji primjer ili njegovu pojednostavljenu verziju, koja izgleda slično kao u nastavku.

U ovoj fazi rada samo će logotip biti prikazan u pregledniku, a izbornik će biti skriven. Da biste je prikazali, morate dodati funkciju koja uzrokuje izmjenu dodatka - okayNav.

Sada možete pogledati rezultate rada. Uz normalnu širinu prozora preglednika, ovaj izbornik izgleda sasvim normalno, ali ako smanjite zaslon, posljednje stavke nestaju. Umjesto toga, pojavljuju se tri velike točke, koje se nalaze vertikalno. Kada ih pritisnete, čini se da se preokreću, uzimajući vodoravni položaj, a skrivene stavke izbornika otkrivene su okomitim popisom u gornjem desnom kutu zaslona.

Ovo rješenje izgleda vrlo moderno, a animirani efekt izlaže resurse u povoljnom svjetlu posjetiteljima.

Joomla

A zadnja mogućnost je stvoriti adaptivni izbornik pomoću sustava Jumla. Ovo je besplatna usluga za izradu web stranica, što je sustav za upravljanje sadržajem za CMS. I kao što je već spomenuto na samom početku, ako se web mjesto stvori uz pomoć CMS-a, a postojeći izbornik trebate mijenjati za prilagodljive, onda je najbolje početi s funkcioniranjem stranice od prve oznake. Na isti način kao u prethodnim primjerima, morate stvoriti popis s izbornicima s oznakama s oznakama u HTML-u. Samo za svaku stavku morate napisati svoj razred. Općenito, sve izgleda kao što je prikazano u nastavku.

Zatim morate dodati stilove. Najbolje je staviti sve uvlake na 0 px i primijeniti veličinu okvira: granični okvir. To će omogućiti zadržavanje navedene širine elemenata, bez obzira na to koliko ih ima. Zatim, za glavnu stavku izbornika (div), postavite širinu na 90% i zatim počnite oblikovati svaku stavku zasebno.

Možete ukloniti granice, promijeniti boju i ispuniti, napraviti dizajn koji će se pojaviti kada pokazivač miša iznad pokazivača. U jednoj riječi, učinite sve što odgovara dizajnu resursa. Zadnji korak u kreiranju Joomla adaptivnog izbornika je pretvoriti ga. Češće na Joomla stvara takav izbornik koji se pri promjeni veličine zaslona automatski rekonstruira, dijeleći na nekim linijama. To je također učinjeno u CSS-u, jedina funkcija koja treba biti povezana je kompatibilnost unakrsnog preglednika. Omogućuje da izbornik izgleda isto u različitim preglednicima.

Stvaranje adaptivnog izbornika je stvarno teško, to zahtijeva znanje i iskustvo. Svi primjeri opisani samo su mali dio mogućih varijacija, ali čak i oni mogu biti korisni ako osoba ima osnovno znanje o HTML i CSS.