Nykyaikaisen sivuston reagoiva valikko ei olevain ylellisyyttä, mutta välttämättömyyttä. Nykyaikaisten laitteiden runsaus edellyttää verkkovastaavien tekevän sellaisen asettelun, joka loogisesti näytetään eriresoluutioisilla näytöillä. Ja joissain tapauksissa mukautuvan valikon luominen on paljon vaikeampaa kuin itse suunnittelu, ja siksi tätä asiaa on harkittava.
Ymmärtää mukautuvan asettelun yleinen asettelu-valikossa, sinun on ensin luotava HTML-valikkorakenne ja muotoiltava se CSS: llä. Sitten saadun materiaalin perusteella voit parantaa mukautuvaa mallia. Joten HTML-rakenne näyttää tältä.
Kaksipisteinen valikko HTML-muodossa |
 |
Sinun on lisättävä CSS-tyylit tuloksena olevaan valikkoon. Niiden on ilmoitettava fonttikoko ja väri, tausta, lohkojen sijainti.
Luomalla yksinkertainen toiminto tavalliselletietokoneen näyttö on yksinkertainen asia, ja tämä voidaan nähdä esimerkissä. Sivuston mukautuva valikko luodaan vain silloin, kun on jotain tekemistä, ts. Kun navigointikohteet on jo lisätty. Optimaalinen valikkokohta mobiililaitteille ja tablet-laitteille on hampurilakuvake - neliöruutu, johon on piirretty kolme pystysuoraa viivaa. Kun painat, kaikki valikkokohteet avautuvat. Jotta voit luoda tällaisen navigoinnin, sinun on lisättävä tunnisteet HTML-asiakirjaan.
HTML-asiakirjat |
 |
Seuraavaksi sinun on lisättävä näihin tunnisteisiinsopivat tyylit visuaalisesti houkuttelevan ja luettavan valikon tekemiseksi. Navigointi- ja valikkokuvakekuvien visuaalisen suunnittelun lisäksi sinun on järjestettävä kuvan sijainti vastaavasti. Joten ehdoksi menu_icon span otetaan käyttöön: n-lapsi (1) {yläosa: 0 px};. Eli kuvan yläosa on nolla pikseliä. Samoin sinun on asetettava arvot muille osapuolille.
Nyt mukautuva valikko on melkein valmis.Kunnon näyttämiseen on syytä kiinnittää huomiota: ei mitään. Oletuksena valikkokuvake ei ole näkyvissä sivustolla, joten CSS-asiakirjaan on lisättävä ylimääräinen luokka seuraavalla ehdolla: .menu__icon {näyttö: inline-block;}. Tämä tekee navigoinnin näkyväksi.
Lisäksi sinun on lisättävä CSS-taulukkoontyylit tehtävästä, joka piilottaa lauseet ja alalauseet tarpeen mukaan. Tätä varten sinun on asetettava kiinteä valikkokohta CSS: ssä, järjestettävä näyttö ja kohdistus. Kohteet piilotetaan ylivuoto-olosuhteilla: auto; opasiteetti: 0; z-indeksi: 1000. Voit myös lisätä luokan menu__links-item, joka ilmaisee valikkokohtien tyylin, mutta tämä on jo kehittäjän pyynnöstä.
Joten reagoiva CSS-valikko on melkeinTämä on tehty. Sinun on lisättävä toimintoja, jotta se voidaan näyttää napsauttamalla kuvaketta. Yksinkertaisuuden vuoksi on parempi käyttää jQueryä, mutta jos haluat, voit luoda puhtaan JavaScriptin. Sekä siellä että siellä käytetään samaa ehtoa:
Tämä täydentää mukautuvan navigoinnin asettelua. Mutta tämä on vain yksi monista vaihtoehdoista tällaisen toiminnallisuuden luomiseksi, joten on syytä harkita loput. Ainakin muutama heistä.
Suurin osa Internetin käyttäjistä odottaakatso navigointipalkki sivuston yläosassa. Tästä on jo tullut eräänlainen standardi, joten mukautuvan vaakasuuntaisen valikon tulisi näyttää kunnolliselta. Se voidaan tehdä CSS: llä, sekä yllä olevissa esimerkeissä että yhdistämällä käsittelyohjelma. Mukautuvan valikon luominen koostuu yleensä kolmesta vaiheesta:
Kaikilla sivustoilla on luonnollisesti omat valikkopalkit, mutta jos resurssi luodaan CMS: ssä, on paljon helpompaa luoda uusi mukautuva valikko.
Mukautuvan toiminnallisuuden luominen ei oleniin vakava ongelma, jos käytät Bootstrap-työkaluja. Vaakatasossa olevan valikon luomiseen on jo valmiiksi asennettuja malleja. Sinun täytyy vain muodostaa yhteys resurssitiedostoon bootstrap.js. Tämän kehyksen avulla verkkovastaava saa mahdollisuuden luoda navigoinnin kaikista monimutkaisuuksista. Bootstrap-reagoiva valikko luodaan tietyllä koodilla.
Esimerkki vaakasuorasta mukautuvasta valikosta, jossa on 3 pistettä |
 |
Olkoon tämä koodi hankala, mutta ymmärrettävä. On syytä huomata, että tässä päärooli on tunniste navjoka vastaa navigoinnin ja sen ulkonäön luomisesta. Kontit on myös kytketty tähän. kontti-neste ja konttijotka asettavat esineiden leveyden. He voivat auttaa valikkoa laajentamaan erottelutarkkuuden näytöissä tai jättää sen kiinteäksi.
Tärkeä rooli mukautuvan toiminnallisuuden luomisessa on luokilla. romahtaa ja navbar-romahdusjotka ovat vastuussa tyylistä. Itse valikko luodaan tallentamalla luettelo luettelosta kohteista, jotka on sijoitettu vaakasuoraan.
Jos käytät tätä koodia navigointiinkehyksiä, leveällä näytöllä se näyttää vaakasuoralta bannerilta. Alussa on resurssin nimi ja sitten kohteet tiukasti määritellyssä järjestyksessä. Kapeilla ruuduilla vain sivuston nimi ja hampurilainen-kuvake näkyvät. Napsautettaessa valikkokohteet näkyvät pystysuunnassa.
Bootstrap-resurssi on hyvä apu reagoivien pudotusvalikkojen luomisessa. Korvaa tämä yksinkertaisesti korvaamalla edellisen esimerkin
Avattavat kohteet |
 |
Samanlainen voidaan tehdä yhdestä kohdasta, jotenja muutama. Kohteen läheisyyteen ilmestyy nuoli alaspäin osoittavilla alakohdilla. Kun napsautetaan, luotu luettelo tulee näkyviin. Jos navigointi näkyy pienellä näytöllä, kohta, jossa on avattava luettelo, merkitään myös nuolella, mutta suunnalla oikealle. Kun painiketta painetaan, toinen pystysuora luettelo alakohdista tulee näkyviin.
Et voi kuitenkaan luoda avattavia luetteloita.vain Bootstrapilla. Jos tätä kirjastoa ei ole kytketty, voit luoda mukautuvan monitasoisen valikon HTML: n ja CSS: n avulla ja ottaa sitten PHP-toiminnon käyttöön.
Ensin sinun on luotava HTML-tiedostojärjestämätön luettelo, joka sisältää muut luettelot. Käytä tätä varten tavanomaisia
HTML-navigointipalkkiluettelo |
 |
Mukautuva avattavan valikon animaatio on asetettukäyttämällä CSS-tyylisivua. Tässä sinun on määritettävä valikon parametrit, kun näyttöä pienennetään 50, 75 ja 25%. Tämä lähestymistapa mukautuvan toiminnallisuuden luomiseen tarjoaa pätevän asettelun, jossa valikko ei "siirry pois".
Ja lopuksi, sinun on annettava alla olevassa asiakirjassa ilmoitettu toiminto.
toiminto |
 |
Jos sivustoa ei harkita, käytämuista toiminnoista kuin tämä, sinun on silti luotava sille erillinen komentosarja. Jos syötät sen tavalliseen HTML-muotoon, se vain ilmestyy selainikkunaan osana tekstiä eikä toimi.
Hyvä ratkaisu olisi myös paneelin luominennavigointi jQuery-laajennuksessa. Tällaisen palvelun mukautuva valikko tehdään vain muutamassa minuutissa. Itse plugin voidaan ladata Internetistä, sillä on yksinkertainen ja intuitiivinen käyttöliittymä, jota on helppo ja helppo käyttää. Joten tyylitaulukon yhdistämisessä ei pitäisi olla mitään ongelmia.
Kun tyylitiedosto on kytketty, sinun on kirjoitettava komentosarja luodaksesi mukautuvan navigoinnin.
Sen jälkeen sinun on tehtävä navigointi, ellei se vielä ole. Tässä kaikki toimii periaatteen mukaisesti: "Kaikki nerokas on yksinkertainen." HTML-asiakirjassa sinun on luotava luettelomerkki tagiin nav. Voit käyttää aiemmin annettua esimerkkiä tai sen yksinkertaistettua versiota, joka näyttää alla näkyvältä.
HTML-valikkokohteet |
 |
Työn tässä vaiheessa vain logo näkyy selaimessa ja itse valikko piilotettu. Jotta se ilmestyy, sinun on lisättävä toiminto, joka aiheuttaa lisäosan muutoksen - okayNav.
toiminto |
$ (toiminto () { var navigointi = $ ("# nav-main"). okayNav (); }); |
Nyt voit tarkastella työn tuloksia.Kun selainikkunan leveys on normaali, tämä valikko näyttää aivan normaalilta, mutta jos pienennät näyttöä, viimeiset kohteet katoavat. Sen sijaan kolme suurta pistettä näkyvät pystysuunnassa. Painettaessa ne näyttävät kääntyvän yli, ottaen vaakasuoran asennon, ja piilotetut valikkokohteet avataan pystysuunnassa näytön oikeassa yläkulmassa.
Tämä ratkaisu näyttää erittäin nykyaikaiselta, ja mukana oleva animoitu vaikutus antaa resurssin suotuisassa valossa kävijöille.
Ja viimeinen vaihtoehto luoda mukautuva valikkokäyttämällä Jumla-järjestelmää. Tämä on ilmainen verkkosivustojen luontipalvelu, joka on CMS-sisällönhallintajärjestelmä. Ja kuten jo alussa mainittiin, jos sivusto luotiin CMS: n avulla ja joudut muuttamaan nykyisen valikon mukautuvaksi, on parasta aloittaa sivuston toiminnallisuuden tekeminen aivan ensimmäisestä tunnisteesta. Samoin kuin edellisissä esimerkeissä, sinun on luotava luettelo luettelo valikoista HTML-muodossa. Vain jokaiselle tuotteelle sinun täytyy kirjoittaa oma luokka. Kaiken kaikkiaan kaikki näyttää alla näkyvältä.
Valikoima jublelle |
 |
Seuraavaksi sinun on lisättävä tyylejä.On parasta asettaa kaikki pehmusteet arvoon 0 px ja käyttää laatikkokoon: border-box. Tämä mahdollistaa elementtien määritellyn leveyden ylläpidon riippumatta siitä, kuinka monta sisennystä niitä on. Lisäksi vanhemman valikkokohdan (div) kohdalla sinun tulee asettaa leveys 90%: iin ja sen jälkeen alkaa muotoilla jokainen kohde erikseen.
Voit poistaa reunukset, muuttaa väriä ja täyttää,tee malli, joka tulee näkyviin, kun viet hiiri. Toisin sanoen, tee kaikki, mikä vastaa resurssin suunnittelua. Viimeinen vaihe Joomla-reagoivan valikon luomisessa on muuttaa se. Useimmiten Joomlassa he luovat valikon, jonka koko muuttuu automaattisesti, kun muutat näytön kokoa jaettuna useisiin riveihin. Tämä kaikki tehdään myös CSS: ssä, ainoa yhteys, joka on kytkettävä, on selainten välisen yhteensopivuuden edellytys. Sen avulla valikot näyttävät samoilta kaikilla selaimilla.
Rajat selaimen toiminto |
 |
Создавать адаптивное меню действительно непросто, tämä vaatii tietoa ja kokemusta. Kaikki kuvatut esimerkit ovat vain pieni osa mahdollisista muunnelmista, mutta jopa niistä voi olla hyötyä, jos henkilöllä on perustiedot HTML: stä ja CSS: stä.
