Prilagodljiv izbornik za suvremenu stranicu - ne samo luksuz, već i nužnost. Obilje modernih uređaja zahtijeva da webmasteri naprave takav raspored, koji bi se logično prikazao na zaslonima s različitim dozvolama. A u nekim je slučajevima stvaranje prilagodljivog izbornika mnogo teže od samog dizajna, pa je stoga potrebno razmotriti to pitanje.
Izbornici velikog zaslona
Za razumijevanje opće sheme izgleda prilagodljivog izbornika, najprije ćete morati stvoriti strukturu izbornika u HTML-u i stilizirati ga pomoću CSS-a. Zatim na temelju materijala možete poboljšati adaptivni predložak. Dakle, HTML struktura će izgledati ovako.
Izbornik za dva stavka u HTML-u
Morat ćete dodati CSS u dobiveni izbornik. Trebaju odrediti veličinu i boju fonta, pozadinu, položaj blokova.
Proces prilagodbe
Stvaranje jednostavne funkcionalnosti za običan zaslon računala je jednostavno, a to se može vidjeti u primjeru. Prilagodljivi izbornik za web-lokaciju stvara se samo kada postoji nešto s čime se može raditi, odnosno kada su navigacijske točke već dodane. Najbolja opcija za izbornik mobilnih uređaja i tableta bit će značka hamburger - kvadratna kutija s tri okomite crte. Kada se pritisne, otvaraju se sve stavke izbornika. Da biste stvorili takvu navigaciju, oznake moraju biti dodane u HTML dokument.
HTML tagovi - dokument
Zatim, ovim oznakama morate dodati odgovarajuće stilove tako da ispadneVizualno atraktivan i čitljiv izbornik. Osim vizualnih navigacijskih izbornika i ikona izbornika, u skladu s tim morate urediti položaj slike. Da, unesete uvjet menu_icon span: nth-child
{top: 0 px};. To jest, prikaz slike s vrha će biti nula piksela. Slično tome, potrebno je postaviti vrijednosti za druge strane.
Sada je prilagodljivi izbornik gotovo spreman. Vrijedi obratiti pozornost na prikaz stanja: none. Ikona izbornika prema zadanim postavkama neće biti vidljiva na web-lokaciji, tako da u CSS dokument mora biti dodana dodatna klasa sa sljedećim uvjetom: .menu__icon {display: inline-block;}. To će učiniti navigaciju vidljivom.
Osim toga, potrebno je dodati zadatak u kaskadni list sa stilom koji će sakriti stavke i pod-stavke prema potrebi. Da biste to učinili, u CSS-u trebate postaviti fiksni položaj izbornika, nacrtati prikaz i poravnanje. Stavke su skrivene pomoću uvjeta prelijevanja: auto; neprozirnost: 0; z-indeks: 1000. Također možete dodati element klase menu__links-koji određuje stil za stavke izbornika, ali to je na zahtjev razvojnog programera.
Posljednji potez
Dakle, prilagodljivi CSS izbornik je gotovo dovršen. Da bi funkcionirao kada kliknete na ikonu, morate dodati funkcije. Bolje je koristiti jQuery za jednostavnost, ali ako želite, možete stvoriti čist javascript. I tu će biti korišten isti uvjet:
(funkcija ($) {$ (function () $ ('. Menu__icon'). On ('click', function () $ (this) .closest ('. toggleClass ('menu_state_open');});});}) (jQuery).
Pri tome se završava prilagodljivi izgled navigacije. Ali to je samo jedna od nekoliko mogućnosti za stvaranje ove vrste funkcionalnosti, pa je vrijedno razmotriti i drugo. Barem nekoliko njih.
Bez mijenjanja standarda
Većina korisnika Interneta očekuje da će vidjeti navigacijsku traku na vrhu stranice. To je već postalo neobičan standard pa prilagodljivi horizontalni izbornik treba imati pristojan izgled. To se može učiniti pomoću CSS-a, kao u gornjim primjerima, i spajanjem skripte rukovatelja. Općenito, stvaranje prilagodljivog izbornika sastoji se od 3 koraka:
Pisanje HTML oznaka
Stiliziranje pomoću CSS-a.
Prilagodba već postojećeg izbornika. Naravno, sve stranice imaju vlastitu traku izbornika, ali ako je resurs stvoren na CMS-u, bit će mnogo lakše stvoriti novi prilagodljivi izbornik.
Bootstrap
Stvaranje prilagodljive funkcionalnosti nije tako ozbiljan problem ako koristite alate Bootstrap. Već postoje predinstalirani predlošci za stvaranje horizontalnog izbornika. Vi samo trebate spojiti na resurs bootstrap.js. S tim okvirom, webmaster dobiva mogućnost kreiranja navigacije bilo koje složenosti. Prilagodljivi izbornik Bootstrap kreira se pomoću određenog koda.
Primjer horizontalnog prilagodljivog izbornika za 3 stavke
Značajke metode
Neka ovaj kod bude težak, ali razumljiv. Valja napomenuti da je glavna uloga ovdje nav oznaka, koja je odgovorna za stvaranje navigacije i njezinog izgleda. Također, ovdje su specificirani spremnici i spremnici s fluidom koji određuju širinu predmeta. Pomoću njih možete izbornik proširiti na zaslonima različitih razlučivosti iliostavi to popravljeno.
Važnu ulogu u stvaranju prilagodljive funkcionalnosti imaju klase kolapsa i navbar kolapsa koje su odgovorne za stil. Izbornik se kreira snimanjem označenog popisa stavki postavljenih vodoravno. Ako primijenite ovaj kod za kadriranje da biste kreirali navigaciju, tada će na širokim zaslonima izgledati kao horizontalni banner. U početku će biti ime izvora, a zatim stavke u strogo određenom redoslijedu. Na uskim zaslonima prikazat će se samo naziv stranice i ikona hamburgera kada kliknete na stavke izbornika koje se pojavljuju kao okomiti popis.
Padajući izbornik
Resurs će Bootstrap učiniti sjajnim pomagačem za stvaranje prilagodljivog padajućeg izbornika. Da biste to učinili, jednostavno zamijenite oznaku
iz prethodnog primjera s kodom ispod.
Stavke dubine
To se može učiniti i za jednu stavku i za nekoliko. Blizu položaja s padajućim pod-stavkama pojavit će se strelica okrenuta prema dolje. Kada se klikne, pojavit će se popis. Ako je navigacija označena na malom zaslonu, stavka s padajućim popisom također će biti označena strelicom, ali s pravcem u desno. Kada se pritisne, pojavit će se drugi vertikalni popis podtočaka.
Izbornik na više razina
Međutim, možete stvoriti padajuće popise ne samo s Bootstrap. Ako ova knjižnica nije povezana, možete stvoriti prilagodljivi višenamjenski izbornik pomoću HTML-a i CSS-adaljnje povezivanje funkcije NRC-a. Za početak, u HTML datoteci trebate stvoriti popis koji se ne nalazi na popisu i koji uključuje i druge popise. Da biste to učinili, upotrijebite standardne oznake i
. Također ne morate zaboraviti na formiranje klasa koje će se obraditi u kaskadnoj CSS stilskoj tablici. Da bismo bili jasniji, vrijedi dati mali primjer pisanja popisa i stvaranja klasa.
HTML-lista navigacijske trake
Animacija prilagodljivog padajućeg izbornika postavlja se pomoću kaskadnog obrasca stila. Ovdje morate odrediti opcije izbornika kada smanjite zaslon za 5075 i 25%. Takav pristup stvaranju adaptivnog funkcionalnog sustava pruža kompetentan raspored, u kojem izbornik ne "vuče". I na kraju je potrebno u dokument umetnuti dolje navedenu funkciju.
Funkcija
Ako web-mjesto ne razmatra upotrebu drugih značajki osim toga, potrebno je da izradi poseban dokument skripte. Ako ga zalijepite u običan HTML, jednostavno će se pojaviti u prozoru preglednika kao dio teksta i neće raditi.
JQuery
Također je izvrsno rješenje za stvaranje navigacijske trake na jQuery dodatku. Prilagodljivi izbornik na takvoj usluzi traje samo nekoliko minuta. Plugin 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 stila. Nakon povezivanja stilske datoteke morate napisati skriptustvoriti prilagodljivu navigaciju.
Nakon toga vam je potreban stroj za navigaciju ako već nije tamo. Ovdje se sve temelji na načelu: "Sve je jednostavno briljantno." U HTML dokumentu morate stvoriti označeni popis u nee tagu. Možete upotrijebiti gornji primjer ili njegovu pojednostavljenu verziju, koja izgleda kao ova u nastavku.
Elementi izbornika HTML
U ovom trenutku u pregledniku bit će prikazan samo logotip, a sam izbornik će biti skriven. Da bi se pojavio, morate dodati funkciju koja uzrokuje promjenu dodatka - okayNav.
Sada možete pogledati rezultate rada. Uz normalnu širinu prozora preglednika, ovaj izbornik izgleda potpuno normalno, ali ako smanjite zaslon, posljednje stavke nestaju. Umjesto njih nalaze se tri velike točke, koje se nalaze vertikalno. Kada se pritisne, okreću se, zauzimaju vodoravni položaj, a skrivene stavke izbornika otkrivaju okomiti popis u gornjem desnom kutu zaslona.
Takvo rješenje izgleda vrlo moderno, a animirani učinak izlaže resurs u povoljnom svjetlu za posjetitelje.
Joomla
I posljednja opcija za stvaranje prilagodljivog izbornika pomoću Jumla sustava. Ovo je besplatna usluga izrade web stranica, koja je CMS sustav za upravljanje sadržajem. I kao što je već spomenuto na samom početku, ako je stranica stvorena pomoću CMS-a, a morate promijeniti postojeći izbornik na adaptivnom, onda je boljesamo početi napraviti mjesto funkcionalno od prve oznake. Na isti način kao u prethodnim primjerima potrebno je stvoriti popis izbornika označivanja u HTML-u. Samo za svaku stavku morate napisati vlastiti razred. Općenito, sve izgleda kao ono ispod.
Izbornik za jooble
Zatim morate dodati stilove. Najbolje je staviti sve alineje na 0 px i primijeniti box-sizing: border-box. To će vam omogućiti da sačuvate zadanu širinu elemenata bez obzira na to koliko će uvlačenje trajati. Zatim, za roditeljsku stavku u izborniku (div) vrijedi postaviti širinu od 90% i nakon početka stilizacije svaku stavku zasebno.
Možete ukloniti obrube, promijeniti boju i ispuniti, napraviti dizajn koji će se pojaviti kada prelazite preko pokazivača. Jednom riječju, učinite sve što će odgovarati dizajnu izvora. Posljednji korak stvaranja prilagodljivog Joomla izbornika je da ga transformirate. Često Joomla stvara izbornik koji pri promjeni veličine zaslona automatski obnavlja, podijeljen u nekoliko redaka. To je sve učinjeno u CSS-u, jedina značajka koja bi trebala biti povezana je stanje crossbrowser-a. Omogućuje izgled izbornika u različitim preglednicima.
Cross-browser function
Stvaranje prilagodljivog izbornika doista je teško, zahtijeva znanje i iskustvo. Svi navedeni primjeri samo su mali dio mogućih varijacija, ali čak i oni mogu biti korisni ako osoba ima osnovno HTML i CSS znanje.
Takvo rješenje izgleda vrlo moderno, a animirani učinak izlaže resurs u povoljnom svjetlu za posjetitelje.
