Miten luodaan reagoiva navigointi

Yksi vaikeimmista osista responsified sivustossa on “navigointi”, tämä osa on todella tärkeä verkkosivuston saavutettavuuden kannalta, koska tämä on yksi tapa, jolla kävijät hyppäävät verkkosivujen yli.

On todella monia tapoja luoda reagoivaa web-sivuston navigointia ja jopa jotkut jQuery-laajennukset ovat käytettävissä sen suorittamiseksi sekunnissa.

Sen sijaan, että käytät välitöntä ratkaisua, me aiomme käydä teillä tässä tehtävässä miten rakentaa yksinkertainen navigointi maasta ja käyttämällä CSS3-mediakyselyjä ja hieman jQueryä näyttämään sen pienessä näytön koossa kuten älypuhelimissa oikein.

Joten, aloitetaan vain.

esittely
Lataa lähde

HTML

Ensinnäkin lisätään meta-näkymäportti pää tag. Tämä meta-näkymäportti tunniste vaaditaan, jotta sivullamme voidaan skaalata oikein minkä tahansa näytön koon sisällä, erityisesti mobiilin katseluportissa.

… Ja lisää seuraava katkaisu navigointimerkkinä ruumis tag.

   Koti
 Miten
 kuvakkeet
 Design
 Web 2.0
 Työkalut
 
 valikko

Kuten edellä näet, meillä on kuusi ensisijaista valikkolinkkiä ja lisäsimme vielä yhden linkin niiden jälkeen. Tätä ylimääräistä linkkiä käytetään Vedä valikon navigointi, kun se on piilotettu pienessä näytössä.

Lue lisää: Älä unohda viewport-metatunnistetta.

tyylit

Tässä osassa alamme suunnitella navigointia. Tyyli on täällä vain koristeellinen, voit valita haluamasi värit. Mutta tässä tapauksessa me (minä henkilökohtaisesti) haluan ruumis on pehmeä ja kermainen väri.

 runko taustaväri: # ece8e5;

nav tunniste, joka määrittää navigoinnin 100% selainikkunan koko leveys, kun taas ul missä se sisältää ensisijaiset valikkolinkit 600px leveys.

 nav korkeus: 40px; leveys: 100%; tausta: # 455868; kirjasinkoko: 11pt; font-perhe: 'PT Sans', Arial, sans-serif; font-paino: lihavoitu; asema: suhteellinen; reunapohja: 2px kiinteä # 283744;  nav ul pehmuste: 0; marginaali: 0 auto; leveys: 600px; korkeus: 40px;

Sitten me kellua valikkolinkit vasemmalle, joten ne näkyvät vaakasuorassa vierekkäin, mutta elementin kelluva aiheuttaa myös vanhempien romahtamisen.

 nav li näyttö: inline; float: vasen;

Jos huomaat yllä olevasta HTML-merkinnästä, olemme jo lisänneet clearfix vuonna luokka attribuutti sekä nav ja ul selvittää asiat ympärillä, kun siirrämme sen sisällä olevat elementit käyttämällä tätä CSS-selkänojaa. Joten, lisäät tyylin sivulle seuraavat tyylisäännöt.

 .clearfix: ennen, .clearfix: jälkeen content: ""; näyttö: taulukko;  .clearfix: jälkeen clear: molemmat;  .clearfix * zoom: 1;

Koska meillä on kuusi valikkolinkkiä ja olemme myös määrittäneet kontin 600px, jokaisella valikkolinkillä on 100px leveys.

 nav a väri: #fff; näyttö: inline-block; leveys: 100px; text-align: center; teksti-koristelu: ei; linjan korkeus: 40px; teksti-varjo: 1px 1px 0px # 283744;

Valikkolinkit erotetaan 1px oikealle rajalle, lukuun ottamatta viimeistä. Muista edellinen postilaatikkomalli, valikon leveyttä laajennetaan 1px tehdä siitä 101px rajan lisäyksenä, joten tässä muutamme box-mitoitus malli border-box valikon säilyttämiseksi 100px.

 nav li a border-right: 1px solid # 576979; box-mitoitus: border-box; -moz-box-mitoitus: border-box; -webkit-box-mitoitus: border-box;  nav li: viimeinen lapsi raja-oikea: 0;

Seuraavaksi valikossa on kirkkaampi väri, kun se on : hover tai : aktiivinen osavaltio.

 nav a: hover, nav a: aktiivinen taustaväri: # 8c99a4;

… Ja lopuksi ylimääräinen linkki piilotetaan (työpöydän näytölle).

 nav # vedä näyttö: ei;

Tässä vaiheessa me vain muotoilemme navigointia ja mitään ei tapahdu, kun selaimen ikkunan kokoa muutetaan. Siis siirrymme seuraavaan vaiheeseen.

Lue lisää: CSS3-laatikon koko (Hongkiat.com)

Media-kyselyt

CSS3-mediakyselyjä käytetään määrittämään, miten tyylit siirtyvät joissakin tietyissä katkaisupisteissä tai erityisesti laitteen näytön koossa.

Koska navigointi on aluksi 600px fix-width, määrittelemme ensin tyylit, kun niitä tarkastellaan 600px tai pienempi näytön koko, niin käytännössä, Tämä on ensimmäinen taukopiste.

Tässä näytön koossa kukin kahdesta valikkolinkistä näkyy vierekkäin, joten ultäällä on leveys 100% selaimen ikkunan ollessa valittavissa 50% leveys.

 @media-näyttö ja (max-width: 600px) nav korkeus: auto;  nav ul leveys: 100%; näyttö: lohko; korkeus: auto;  nav li leveys: 50%; float: vasen; asema: suhteellinen;  nav li a border-bottom: 1px solid # 576979; raja-oikea: 1kpl kiinteä # 576979;  nav a text-align: left; leveys: 100%; teksti-luetelmakohta: 25px;

… Ja sitten määrittelemme myös, miten navigointi näytetään, kun näyttö pienenee 480px tai pienempi (joten tämä on meidän toinen katkaisupiste).

Tässä näytön koossa ylimääräinen linkki, jonka olemme lisänneet, alkaa näkyviin, ja annamme myös linkin a “valikko” kuvaketta oikealla puolella käyttämällä :jälkeen pseudo-elementti, kun ensisijaiset valikkolinkit piilotetaan tallentamaan enemmän pystysuoria välilyöntejä näytölle.

 @media only screen ja (max-width: 480px) nav border-bottom: 0;  nav ul näyttö: ei; korkeus: auto;  nav # vedä näyttö: lohko; taustaväri: # 283744; leveys: 100%; asema: suhteellinen;  nav a # pull: jälkeen content: ""; tausta: url ('nav-icon.png') ei-toista; leveys: 30px; korkeus: 30px; näyttö: inline-block; asema: absoluuttinen; oikea: 15px; alkuun: 10px;

Lopuksi, kun näyttö pienenee 320px ja laske valikko näkyviin pystysuoraan ylhäältä alas.

 @media only screen ja (max-width: 320px) nav li display: block; float: ei; leveys: 100%;  nav li a border-bottom: 1px solid # 576979;

Nyt voit yrittää muuttaa selainikkunan kokoa. Sen pitäisi nyt pystyä mukauttamaan näytön kokoa.

Lue lisää: Media-kyselyt standardilaitteille.

Valikon näyttäminen

Tässä vaiheessa valikko on edelleen piilotettu, ja se näkyy vain, kun sitä tarvitaan napauttamalla tai napsauttamalla “valikko” linkki ja voimme saavuttaa vaikutuksen käyttämällä jQueryä slideToggle ().

 $ (toiminto () var pull = $ ('# pull'); valikko = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on (klikkaa, toiminto (e) e.preventDefault (); menu.slideToggle ();););

Kun muutat selainikkunan kokoa heti, kun olet juuri katsonut ja piilottanut valikon pienessä näytössä, valikko pysyy piilossa, koska näyttö: ei jQueryn luoma tyyli on edelleen liitetty elementtiin.

Joten meidän on poistettava tämä tyyli ikkunan koon muuttuessa seuraavasti:

 $ (ikkuna) .resize (toiminto () var w = $ (ikkuna) .width (), jos (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Tarvitsetko kaikki koodit, joita tarvitsemme, voimme nyt tarkastella navigointia seuraavista linkeistä, ja suosittelemme, että testaat sen vastaavassa suunnittelutestissä, kuten Responsinatorissa, jotta voit katsella sitä eri leveydellä kerralla.

esittely
Lataa lähde

Bonus: Vaihtoehtoinen tapa

Kuten olemme aiemmin maininneet tässä viestissä, siellä on muitakin tapoja tehdä se ja käyttää JavaScript-kirjastoa, jota kutsutaan SelectNav.js on yksi helpoin tapa. Tämä on puhdas JavaScript, joka ei luota toiseen kolmannen osapuolen kirjastoon kuten jQuery.

Periaatteessa se kopioi luettelovalikon ja muuntaa sen a valikko käyttää itse laitteen käyttöliittymää.

Katso tarkemmat tiedot virallisista asiakirjoista.

johtopäätös

Olemme päässeet läpi kaiken tapaamme luoda herkkä navigointi tyhjästä. Tämä, jonka olemme luoneet täällä, on vain yksi esimerkkejä, ja kuten edellä mainitsimme ja edellä on esitetty, on monia muita ratkaisuja, joita voit toteuttaa. Joten, nyt on jätettävä päätökseesi valita, mikä käytäntö sopii parhaiten vaatimuksiin ja verkkosivustosi navigointirakenteeseen.