Prilagodljiv meni za sodobno spletno mesto - ne le razkošje, temveč nujnost. Izobilje sodobnih naprav zahteva, da webmasters izdelajo takšno postavitev, ki bi bila logično prikazana na zaslonih z različnimi dovoljenji. V nekaterih primerih pa je ustvarjanje prilagodljivega menija veliko težje od samega modela, zato je treba to vprašanje obravnavati.

Meniji velikega zaslona

Za razumevanje splošne sheme postavitve prilagodljivega menija boste morali najprej ustvariti strukturo menija v HTML-ju in jo stilizirati s pomočjo CSS-ja. Potem lahko na podlagi gradiva izboljšate prilagodljivo predlogo. Tako bo struktura HTML izgledala takole.




Meni za dva odstavka v HTML





V izbrani meni morate dodati CSS. Določiti morajo velikost in barvo pisave, ozadje, položaj blokov.

Proces prilagajanja

Ustvarjanje preproste funkcionalnosti za navaden računalniški zaslon je enostavno, kar je mogoče videti v zgledu. Prilagodljiv meni za spletno mesto se ustvari samo, če je z njim nekaj delati, to je, ko so navigacijske točke že dodane. Najboljša možnost za meni za mobilne naprave in tablice je značka hamburger - kvadratna škatla s tremi navpičnimi črtami. Ob pritisku se odprejo vsi elementi menija. Če želite ustvariti takšno navigacijo, morate v dokument HTML dodati oznake.

HTML tags - dokument





Nato morate tem oznakam dodati ustrezne sloge, da se izkažeVizualno privlačen in berljiv meni. Poleg vizualne navigacije in ikon menija morate položaj slike ustrezno urediti. Da, vnesete pogoj menu_icon span: nth-child

{top: 0 px};. To pomeni, da bo upodobitev slike z vrha enaka nič slikovnih pik. Podobno je treba določiti vrednosti za druge stranke.


Zdaj je prilagodljiv meni skoraj pripravljen. Zanimivo je opozoriti na prikaz stanja: nič. Privzeto ikona menija ne bo vidna na spletnem mestu, zato je treba v dokument CSS dodati še dodatni razred z naslednjim pogojem:. Tako bo vidna navigacija.

Poleg tega je treba v kaskadni list slog dodati nalogo, ki po potrebi skriva odstavke in pododstavke. Če želite to narediti, morate v CSS nastaviti fiksni položaj menija, narisati prikaz in poravnavo. Elementi so skriti s prenapolnjenimi pogoji: auto; motnost: 0; z-indeks: 1000. Dodate lahko tudi element menu__links-item, ki določa slog za elemente menija, vendar je na zahtevo razvijalca.

Zadnja poteza

Tako je prilagodljiv meni CSS skoraj dokončan. Za delovanje, ko kliknete ikono, morate dodati funkcije. Za enostavnost je bolje uporabiti jQuery, vendar če želite, lahko ustvarite čisto javascript. In tam, in tam bo uporabljen isti pogoj:

(funkcija ($) {$ (function () $ ('. Menu__icon'). '). toggleClass (' menu_state_open ');});});}) (jQuery).

Pri tem se konča prilagodljiva postavitev navigacije. Toda to je le ena od številnih možnosti za ustvarjanje takšne funkcionalnosti, zato je vredno razmisliti o drugem. Vsaj nekaj od njih.

Brez spreminjanja standardov

Večina uporabnikov interneta pričakuje navigacijsko vrstico na vrhu strani. To je že postalo nenavaden standard, zato mora imeti prilagodljiv horizontalni meni ustrezen videz. To je mogoče storiti z uporabo CSS, kot v zgornjih primerih, in s povezovanjem skripta manipulatorja. Na splošno je ustvarjanje prilagodljivega menija sestavljeno iz treh korakov:

Pisanje HTML-oznak

Oblikovanje z uporabo kaskadnega seznama slogov (CSS).

Prilagoditev že obstoječega menija.

Seveda imajo vse strani svojo menijsko vrstico, če pa je vir ustvarjen na CMS-u, bo veliko lažje ustvariti nov prilagodljivi meni.

Bootstrap

Ustvarjanje prilagodljive funkcionalnosti ni tako resen problem, če uporabljate orodja Bootstrap. Za izdelavo horizontalnega menija so že vnaprej nameščene predloge. Samo povežite se z virom bootstrap.js. S tem okvirjem webmaster dobi zmožnost ustvarjanja navigacije poljubne kompleksnosti. Prilagodljiv meni Bootstrap je ustvarjen s posebno kodo.

Primer horizontalnega prilagodljivega menija za 3 točke



​​

Značilnosti metode

Naj ta koda postane okorna, vendar razumljiva. Treba je opozoriti, da je glavna vloga pri tem oznaka nav, ki je odgovorna za ustvarjanje navigacije in njen videz. Prav tako so tukaj navedene posode in posode s tekočino za posodo, ki določajo širino predmetov. Z njihovo pomočjo lahko prisilite meni, da se razširi na zaslonih različnih resolucij alipustite popravljeno. Pomembno vlogo pri ustvarjanju prilagodljive funkcionalnosti imajo razredi kolapsa in navbar, ki so odgovorni za slog. Meni se ustvari s snemanjem označenega seznama postavk, ki so postavljene vodoravno. Če uporabite to kodo za uokvirjanje za ustvarjanje navigacije, bo na širokih zaslonih izgledala kot vodoravna zastavica. Na začetku bo ime vira, nato pa postavke v strogo določenem zaporedju. Na ozkih zaslonih se prikažeta samo ime mesta in ikona hamburgerja, ko kliknete na elemente menija, ki se prikažejo kot navpični seznam.

V spustnem meniju

Bootstrap postane odličen pomočnik pri ustvarjanju prilagodljivega spustnega menija. V ta namen preprosto zamenjajte vrstico z oznako

iz prejšnjega primera s spodnjo kodo.

Postavke v globini

To je mogoče storiti za eno točko in več. V bližini položaja z izpuščanjem podpostavk se prikaže puščica obrnjena navzdol. Ko kliknete, se prikaže seznam. Če je navigacija označena na majhnem zaslonu, bo element s spustnim seznamom označen tudi s puščico, vendar s smerjo v desno. Ko ga pritisnete, bo na voljo še en navpični seznam podpostavk.

Večstopenjski meni

Vendar pa lahko spustne sezname ustvarite ne samo z zagonskim zagonom. Če knjižnica ni povezana, lahko ustvarite prilagodljiv večnivojski meni z uporabo HTML in CSSnadalje povezuje funkcijo NRC. Za začetek morate v datoteki HTML, ki vključuje druge sezname, ustvariti seznam, ki ni na seznamu. To storite tako, da uporabite standardne oznake in

. Prav tako vam ni treba pozabiti na oblikovanje razredov, ki bodo obdelani v kaskadnem CSS-sloju. Da bi bili bolj jasni, je vredno dati majhen primer pisanja seznamov in ustvarjanja razredov.

HTML-seznam navigacijske vrstice

Animacija prilagodljivega spustnega menija je nastavljena s pomočjo kaskadnega seznama slogov. Tukaj morate določiti možnosti za meni, ko zaslon zmanjšate za 5075 in 25%. Takšen pristop k ustvarjanju prilagodljive funkcionalnosti zagotavlja kompetentno postavitev, v kateri meni ne »potegne«. In na koncu je potrebno v dokument vstaviti spodaj navedeno funkcijo.

Funkcija

Če spletna stran ne upošteva uporabe nobenih drugih funkcij razen tega, mora še vedno izdelati ločen dokument skripta. Če ga prilepite v običajni HTML, se bo v oknu brskalnika prikazal kot del besedila in ne bo deloval.

JQuery

Prav tako je odlična rešitev ustvariti navigacijsko vrstico na vtičniku jQuery. Prilagodljiv meni za takšno storitev traja le nekaj minut. Sam vtičnik se lahko prenese na spletu, ima preprost in intuitiven vmesnik, ki je preprost in preprost za uporabo. Torej ne bi smelo biti težav s povezovanjem sloga. Ko je datoteka stila povezana, morate napisati skriptustvariti prilagodljivo navigacijo.

Potem potrebujete navigacijski stroj, če ga še ni. Tukaj vse temelji na načelu: "Vse je preprosto briljantno." V dokumentu HTML morate ustvariti označen seznam v oznaki nee. Uporabite lahko zgornji primer ali njegovo poenostavljeno različico, ki izgleda kot spodnja.

Elementi menija HTML

Na tej točki brskalnika bo prikazan samo logotip, sam meni pa bo skrit. Če želite, da se prikaže, morate dodati funkcijo, ki povzroči spremembo vtičnika - okayNav.

Funkcija



$ (funkcija () {var navigation = $ ('# nav-main').

Zdaj lahko pogledate rezultate dela. Z običajno širino okna brskalnika ta meni izgleda povsem normalno, če pa zmanjšate zaslon, izginejo zadnji elementi. Namesto njih obstajajo tri velike točke, ki se nahajajo navpično. Ob pritisku se obrnejo, zavzamejo vodoravno pozicijo, skrite elemente menija pa pokaže navpični seznam v zgornjem desnem kotu zaslona.

Takšna rešitev izgleda zelo moderno, animirani učinek pa izpostavlja vir v ugodni luči za obiskovalce.

Joomla

In zadnja možnost za ustvarjanje prilagodljivega menija z uporabo sistema Jumla. To je brezplačna storitev za ustvarjanje spletnih strani, ki je sistem za upravljanje vsebin CMS. In kot smo že omenili na samem začetku, če je bilo spletno mesto ustvarjeno z uporabo CMS-a, in morate spremeniti obstoječi meni na prilagodljivem, potem je bolješele začnite s funkcijami mesta od prve oznake. Na enak način kot v prejšnjih primerih morate ustvariti seznam menijev označevanja v HTML-ju. Samo za vsako postavko morate napisati svoj razred. Na splošno je vse videti kot spodaj.

Meni za jooble

Nato morate dodati sloge. Najbolje je, da vse alineje postavite na 0 px in uporabite box-sizing: border-box. To vam bo omogočilo, da shranite določeno širino elementov, ne glede na to, koliko bo vdolbina trajala. Nato je za nadrejeni element v meniju (div) smiselno nastaviti širino 90% in po začetku stiliziranja vsakega elementa posebej.

Lahko odstranite obrobe, spremenite barvo in izpolnite, naredite obliko, ki se bo prikazala, ko se premikate nad kazalcem. Z eno besedo naredite vse, kar bo ustrezalo zasnovi vira. Zadnji korak pri ustvarjanju prilagodljivega Joomla menija je, da ga pretvorite. Pogosto Joomla ustvari meni, ki ob spremembi velikosti zaslona samodejno obnovi, razdeli na več vrstic. To je vse storjeno v CSS, edina funkcija, ki jo je treba povezati, je stanje navzkrižnega prenosa. Meni omogoča, da je videti v različnih brskalnikih.

Funkcija navzkrižnega brskanja

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