Kako narediti prilagodljiv meni? Primeri

Prilagodljiv meni za sodobno spletno mesto ni le razkošje, temveč nujnost. Za številne sodobne naprave so potrebni spletni skrbniki, ki bi bili logično prikazani na zaslonih različnih resolucij. In v nekaterih primerih je ustvarjanje prilagodljivega menija veliko težje od samega oblikovanja, zato je treba to vprašanje obravnavati.

Meni za velik zaslon

Za razumevanje splošne sheme prilagoditev meni, boste najprej morali ustvariti menijsko strukturo v HTML-ju in jo stilizirati z uporabo CSS-ja. Nato na podlagi prejetega gradiva lahko tudi izboljšate prilagoditveno predlogo. Torej bo struktura HTML izgledala takole.

Izhajajoči meni bo moral dodati sloge CSS. Določiti morajo velikost in barvo pisave, ozadje, pozicioniranje bloka.

Postopek prilagajanja

Ustvarjanje preproste funkcionalnosti za konvencionalni zaslon računalnika je preprosta stvar, kar je razvidno iz primera. Prilagoditveni meni za spletno mesto se ustvari samo, če je nekaj, s čimer bi lahko delovali, to pomeni, ko so bile navigacijske točke že dodane. Najbolj optimalna različica menija za mobilne naprave in tablete bo ikona hamburgerja - kvadratna škatla, v kateri so trije navpične značilnosti. Ko pritisnete, se odprejo vsi elementi menija. Če želite ustvariti takšno navigacijo, morate v dokument HTML dodati oznake.

Nato boste morali tem oznakam dodati ustrezne sloge, da bi dobili vizualno privlačen in berljiv meni. Poleg vizualizacije ikon za navigacijo in menije morate ustrezno namestiti položaj slike. Torej vnesete stanje menu_icon span: nth-child (1) {top: 0 px} -. To pomeni, da bo slika od zgoraj prikazana ničelna piksla. Podobno morate določiti vrednosti za druge stranke.

Adaptivni meni je sedaj skoraj pripravljen. Treba je pozoren na stanje prikaz: nič. Privzeto, ikona meni ne bo viden na spletni strani, tako CSS-dokument, ki ga je treba dodati dodaten razred s takšnim stanjem: .menu__icon {izpis: inline-block-}. S tem bo navigacija vidna.

Poleg tega morate kaskadni slogovni list dodati nalogo, ki bo po potrebi skrivala elemente in pododrednice. Če želite to narediti, morate v CSS nastaviti fiksno točko menija, urediti prikaz in poravnavo. Elementi so skriti z uporabo pogojev pretoka: samodejna neprepustnost: 0-z-indeks: 1000. Dodate lahko tudi razred menu__links-item, ki določa slog za elemente menija, vendar je to možnost za razvijalca.

Končni dotik

Tako je prilagodljiv meni na CSS skoraj končan. Če želite prikazati, ko kliknete ikono, morate dodati funkcije. Zaradi enostavnosti je bolje uporabiti jQuery, vendar če želite, lahko ustvarite čist jаvascript. Enako stanje se bo uporabljalo tam in tam:

• (Funkcija ($) {$ (function () $ ( "menu__icon.) Na (" klik ", funkcija () $ (ta) .closest () ToggleClass (" menu_state_open ")" meni. "- ..}) -}) -}) (jQuery).

S tem je končana postavitev prilagodljive navigacije. Ampak to je le ena od možnosti za ustvarjanje takšne funkcionalnosti, zato je vredno razmisliti o preostalem. Vsaj nekaj jih je.

Brez spreminjanja standardov

Večina uporabnikov interneta pričakuje, da bo navigacijska vrstica na vrhu strani. To je že postalo nekakšen standard, zato mora prilagodljiv horizontalni meni imeti dostojen videz. To je mogoče storiti z uporabo CSS, tako kot v primerih, ki so prikazani zgoraj, in s povezovanjem skripta za vodenje. Na splošno je ustvarjanje prilagodljivega menija sestavljeno iz treh korakov:

1. Pisanje HTML oznak
2. Njihov stil s kaskadno slogovno ploščo (CSS).
3. Prilagajanje že obstoječega menija.

Seveda imajo vsa spletna mesta lastne menijske vrstice, če pa je vir ustvarjen v CMS-u, bo veliko lažje ustvariti nov prilagodljiv meni.

Bootstrap

Ustvarjanje prilagodljivega funkcionalnosti ni tako resna težava, če uporabljate orodja Bootstrap. Vnaprej pripravljene predloge za ustvarjanje vodoravnega menija. Morate se samo povezati z datoteko virov bootstrap.js. V tem okviru lahko spletni skrbnik ustvari navigacijo za vsako zapletenost. Prilagodljiv meni z Bootstrapom je ustvarjen s posebno kodo.

Značilnosti metode

Naj ta koda in okoren, vendar razumljiv. Treba je omeniti, da glavno vlogo igra oznaka nav, ki je odgovorna za ustvarjanje navigacije in njenega videza. Tukaj so tudi zabojniki posoda-tekočina in zabojnik, ki določajo širino predmetov. Z njihovo pomočjo lahko meniju razširite na zaslonih različnih resolucij ali pa jih odpravite.

Pomembno vlogo pri ustvarjanju prilagodljive funkcionalnosti igrajo razredi kolaps in navbar-kolaps, ki so odgovorni za slog. Meni sam je ustvarjen s pisanjem seznam označenih postavke, ki so postavljene vodoravno.

Če to kodo uporabite za ustvarjanje navigacije, potem bo na širokih zaslonih izgledal kot vodoravna pasica. Na začetku bo ime vira, nato pa postavke v strogo določenem zaporedju. Na ozkih zaslonih se prikaže samo ime mesta in ikona hamburgerja, ko kliknete, kateri elementi menija so prikazani kot navpični seznam.

Spustni meni

Resource Bootstrap bo odličen pomočnik za ustvarjanje prilagodljivega spustnega menija. Če želite to narediti, preprosto zamenjajte vrstico oznak

To je mogoče storiti za eno točko in za več. V bližini položaja z padajočimi podpostavkami se bo prikazala puščica navzdol. Ko kliknete, se prikaže ustvarjeni seznam. Če se bo navigacija prikazan na malem zaslonu, nato kliknite spustni seznam bo označena tudi s puščico, vendar s smerjo na desni strani. Ko pritisnete, se pojavi še en navpični seznam podpostavk.

Večstranski meni

Vendar, spustni seznami ne le s pomočjo Bootstrap-a. Če ta knjižnica ni povezana, lahko ustvarite prilagodljiv večstopenjski meni z uporabo HTML in CSS-ja, nato pa povežite funkcijo PHP.

Najprej morate v datoteki HTML, ki vsebuje druge sezname, ustvariti neogiben seznam. Če želite to narediti, uporabite standardne oznake

in
• . Ne pozabite na oblikovanje razredov, ki jih bo kasneje obdelal kaskadni slogovni list CSS. Da bi bilo bolj jasno, je vredno dati majhen primer pisanja seznamov in ustvarjanja razredov.

Animacija prilagoditvenega spustnega menija je podana s kaskadnim slogovnim listom. Tukaj morate določiti parametre menija, ko se zaslon zmanjša za 50, 75 in 25%. Ta pristop k ustvarjanju prilagoditvenih funkcij zagotavlja kompetentno postavitev, v kateri se meni ne premakne.

Na koncu morate v dokumentu vnesti spodnjo funkcijo.

Če spletno mesto ne upošteva uporabe nobenih drugih funkcij, mora za to še vedno ustvariti ločen skriptni dokument. Če jo napišete v navaden HTML, se bo preprosto pojavilo v oknu brskalnika kot del besedila in ne bo delovalo.

JQuery

Tudi odlična rešitev je ustvariti navigacijsko vrstico na vtičniku JQuery. Adaptivni meni na tej storitvi je le nekaj minut. Plug se lahko prenese na internetu, ima preprost in intuitiven vmesnik, ki je preprost in enostaven za uporabo. Zato ne bi smeli imeti težav pri povezovanju slogovne tabele.

Ko je povezava s slogom povezana, morate napisati scenarij, da ustvarite prilagoditveno navigacijo.

Potem je potrebno navigacijo, če še ni tam. Tukaj vse deluje po načelu: "Vse genialno je preprosto." V dokumentu HTML morate v oznaki ustvariti seznam z oznako nav. Uporabite lahko zgornji primer ali njeno poenostavljeno različico, ki je videti spodaj.

V tej fazi dela bo v brskalniku prikazan le logotip, sam meni pa bo skrit. Če želite, da se prikaže, morate dodati funkcijo, ki povzroči spreminjanje vtičnika - okayNav.

Sedaj si lahko ogledate rezultate dela. Z običajno širino okna brskalnika ta meni izgleda precej normalno, če pa skrčite zaslon, bodo zadnji elementi izginili. Namesto tega se pojavijo tri velike pike, nameščene navpično. Ko se pritisnejo, se zdi, da se obrnejo, ob vodoravnem položaju in skriti elementi menija se razkrijejo z navpičnim seznamom v zgornjem desnem kotu zaslona.

Ta rešitev izgleda zelo sodobno, animirani učinek pa daje viru v ugodni luči obiskovalcem.

Joomla

In zadnja možnost je ustvariti prilagodljiv meni z uporabo sistema Jumla. To je brezplačna storitev za ustvarjanje spletnih mest, ki je sistem za upravljanje vsebine za CMS. In kot že omenjeno na začetku, če je stran ustvarjena s pomočjo CMS, in da je treba spremeniti obstoječe menija prilagodljiv, da je najbolje, da začnete kar funkcionalno mesto s prvo oznako. Na enak način kot v prejšnjih primerih morate v HTML-ju ustvariti seznam z označenimi meniji. Samo za vsak predmet morate napisati svoj razred. Na splošno je vse videti kot je prikazano spodaj.

Potem morate dodati sloge. Najbolje je, da vse alinee postavite na 0 px in uporabite velikost polja: border-box. To bo omogočilo ohranitev določene širine elementov, ne glede na to, koliko indentov je. Nato za element nadrejenega menija (div) nastavite širino na 90% in nato začnite vsak stoj ločeno.

Odstranite lahko robove, spreminjate barvo in napolnite, naredite obliko, ki se bo prikazala, ko se premikate nad kazalko. Z eno besedo storite vse, kar ustreza oblikovanju virov. Zadnji korak pri ustvarjanju prilagodljivega menija Joomla je pretvorba. Pogosteje na Joomli ustvarjajo takšen meni, ki ob zamenjavi velikosti zaslona samodejno rekonstruira in deli na nekaterih vrsticah. To je storjeno tudi v CSS, edina funkcija, ki jo je treba povezati, je združljivost med brskalniki. Meni omogoča, da je v različnih brskalnikih enak videz.

Ustvarjanje prilagodljivega menija je res težko, to zahteva znanje in izkušnje. Vsi opisani primeri so le majhen del možnih sprememb, vendar so lahko celo koristni, če ima oseba osnovno znanje o HTML in CSS.