Kiinteä sivuvalikko sivua selattaessa. Kiinteä vaakavalikko. Kiinteä ylävalikko

Viime aikoina trendi on tullut muotiin: kiinteä valikko sivua vierittäessä. Yleensä tämä on vaakasuuntainen valikko aloitussivusivustoilla.

Se toimii niin, että kun sivu latautuu, valikko sijaitsee tietyssä paikassa sivulla (esimerkiksi "otsikon" alla) ja kun sivua rullaat, se kiinnittyy selainikkunan yläosaan ja ei rullaa kuten muu sisältö.

Jos vierailija rullaa sivua ylöspäin ja saapuu sivun alkuun, valikko palaa paikalleen. Siten vierailija, ollessaan missä tahansa sivulla, voi käyttää sitä ja siirtyä sivuston muille sivuille. Tämä on erittäin kätevää ja noudattaa käytettävyysperiaatteita.

Nyt kerron sinulle, kuinka toteuttaa tällainen valikko viettämällä mahdollisimman vähän aikaa ja turvautumatta ammattilaisten apuun.

Ensin meidän on yhdistettävä sivuston jQuery-kirjasto

< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

Voit muodostaa yhteyden paikallisesti tai Googlen kautta.

Jos haluat muodostaa yhteyden paikallisesti, sinun on ladattava jQuery-tiedosto viralliselta verkkosivustolta http://jquery.com/

CSS

JavaScript

Skriptissä luomme 2 muuttujaa, joihin tallennamme ylätunnisteen korkeuden ja lohkon sisennyksen arvot valikon yläosassa. Ei ehkä ole sisennystä (kuten tässä tapauksessa). Sitten kirjoitetaan käsittelijä ikkunaobjektin onScroll-tapahtumalle. Siinä lasketaan scrollTop()-menetelmällä etäisyys sivun yläreunasta vieritysrullan nykyiseen sijaintiin. Laskennan perusteella asetamme lohkon valikon kanssa.

Siinä kaikki, yksinkertaisten ratkaisujen ansiosta voit saavuttaa kauniin kiinteän valikon, joka ei vieritä, kun selaat sivuston pääosaa

Tehtävä

Aseta lohkoelementin sijainti niin, että se pysyy aina samassa paikassa sivua vieritettäessä.

Ratkaisu

Elementin "jäädyttäminen" tiettyyn paikkaan verkkosivulla tehdään käyttämällä tyyliominaisuuden sijaintia, jonka arvo on kiinteä . Tässä tapauksessa elementin sijainti ei muutu edes vierittäessä sivua vierittämällä. Itse koordinaatit määritetään ominaisuuksien vasen , oikea , ylä ja alaosa kautta, jotka vastaavasti määrittävät sijainnin selainikkunan vasemmasta, oikeasta, ylä- ja alareunasta (esimerkki 1).

Esimerkki 1: Asennon käyttö

HTML5 CSS 2.1 IE Cr Op Sa Fx

Kiinteä valikko .menu ( sijainti: kiinteä; /* Kiinteä sijainti */ oikea: 10px; /* Etäisyys selainikkunan oikeasta reunasta */ ylhäältä: 20 %; /* Yläetäisyys */ täyte: 10px; /* Marginaalit tekstin ympärillä * / tausta: #ffe; /* Taustan väri */ reunus: 1px solid #333 /* Reunusasetukset */ .text ( korkeus: 1000px; ) Valikko

Tämän esimerkin tulos on esitetty kuvassa. 1. Huomaa, että elementin sijainti ei muutu, kun vierität sivua alaspäin.

Ensin muutama sana itse tehtävästä. Oletetaan, että sinulla on verkkosivusto, jossa päätät korjata valikon vierittäessäsi. Tässä tapauksessa navigoinnissa tai tekstissä käytetään ns. ankkureita. Kun napsautat näitä linkkejä, sivunäyttö siirtyy automaattisesti vastaaviin paikkoihin sivulla (missä ankkuri sijaitsee). Tässä tapauksessa osa sisällöstä on kuitenkin valikkolohkon peitossa.

Tämä tilanne esiintyy useimmiten vuonna. Kuvakaappaus näyttää ongelman selkeämmin:

StackOverflowsta löydettiin kaksi ratkaisua ongelmaan, jotka eroavat toisistaan ​​vain CSS:ssä.

Jos haluat luoda sisennetyn ankkurin, lisää ensin siihen tietty tyyli, esim. ankkuri:

Tässä 55 pikseliä— valikon korkeus + sisennys, joita tarvitaan, jotta sisältöteksti olisi näkyvissä. Määritä sivustollesi sopivat arvot. Työssäni käytin juuri tätä vaihtoehtoa.

Vaihtoehtoinen menetelmä tarjoaa toteutuksen täytteen avulla, mikä yleensä johtaa yhteen koodiriviin:

.ankkuri ( pehmuste-top : 90px ; )

Ankkuri ( täyttö yläosan: 90 pikseliä; )

Lisäksi suosittelen, että katsot tätä artikkelia, jossa kirjoittaja antoi 5 erilaista ratkaisua kerralla kuinka käyttää sisennettyjä ankkureita vaakasuoraan kiinteään valikkoon sivua vierittäessä: pseudoelementtien, negatiivisten sisennysten jne. kautta.

Jos sinulla on kysyttävää tai jotain lisättävää aiheesta, kirjoita kommentteihin.

Joita löytyy yhä useammin blogien ja muiden resurssien sivuilta. Tällaisten navigointipalkkien käyttö on varsin perusteltua. Yksi tärkeimmistä syistä näiden jQuery-laajennusten aktiiviseen käyttöön on se, että valikko on aina vierailijan ulottuvilla, vaikka se olisi sivun alalaidassa. Lisäksi kiinteä valikko vie vähän tilaa eikä häiritse huomiota pääsisällöstä. Yleisesti ottaen kiinteä valikko parantaa sivuston käytettävyyttä.
Olen koonnut kokoelman parhaita, mielestäni ilmaisia ​​jQuery-laajennuksia kiinteän valikon toteuttamiseen. Yritin varmistaa, että jokainen lisäosa on jollakin tavalla ainutlaatuinen, jotta mitä tahansa valinnan lisäosaa voidaan käyttää nimenomaan projektissasi. Kokoelmasta löydät sekä yksinkertaisia ​​että monimutkaisempia laajennuksia animaatioilla jne.
Jos tarvitset hyvin yksinkertaisen kiinteän valikon, esimerkiksi kuinka toteutimme tarttuvan paneelin sosiaalisilla painikkeilla, voit tehdä ilman jQuery-laajennuksia, koska sivun lataaminen skripteillä ei ole kovin hyvä, mutta puhumme tästä seuraavissa artikkeleissa . Tilaa kanavamme tai sivumme, jotta et menetä mielenkiintoista materiaalia.
Niin. Tässä on 6 jQuery-laajennusta kiinteän valikon luomiseen.

Piilota automaattisesti Sticky HeaderjQuery -navigointilaajennus, joka toimii samalla periaatteella kuin yllä oleva skripti, mutta vähemmän sujuvaa, vaikka ensi silmäyksellä hieman helpompaa. Valitettavasti en voi sanoa, että navigointi on täysin mukautuva, koska pienillä näytöillä valikon kohdista tulee vain numeroita, mikä on erittäin outoa.

On Scroll Header Effects Tehokas jQuery-laajennus kiinteään navigointipalkkiin. Voit asettaa sivulle tiettyjä segmenttejä vierittäessäsi, jolloin paneeli muuttuu ja voi muuttaa ulkonäköään kokonaan. Tällaisia ​​osia sivulla voi olla mikä tahansa määrä.

On-Scroll Animated Header Hyvä liitännäinen tahmean navigointipalkin toteuttamiseen. Se toimii näin: aivan sivun alussa näemme korkean otsikon, joka sisältää logon ja valikon. Vierittäessä otsikkoalue, jossa on kaikki elementit, mukaan lukien logo ja navigointi, pienenee sujuvasti ominaisuuksien avulla ja muuttuu kapeaksi nauhaksi, joka on kiinnitetty näytön yläosaan.

Tarkastellaan skriptiä, jonka avulla voit toteuttaa kiinteän valikon verkkosivustolle. Tämän käsikirjoituksen kehittämiseen sisältyy ohjelmointikieli JQuery, koska sen avulla et voi vain korjata valikkoa, kuten yleensä kiinteistön tapauksessa css korjattu, mutta myös sivua ylöspäin vierittäessä taataan, että otsikon sisennys säilyy, jonka voit kirjoittaa tiedostoon js. Lisäksi tämä tekniikka on ihanteellinen kiinteisiin valikoihin, sekä ala- että yläpuolelle.

Tarkastettuaan komentosarjan yhteensopivuuden selainten välillä havaittiin, että se toimii täydellisesti kaikissa uusissa versioissa, mutta selaimessa on ongelmia Internet Explorer vanhempi kuin versio 9, mutta tässä ei ole mitään yllättävää, tämä on tyypillistä vanhoille selaimille.

Toivottavasti olet käyttänyt uusia jo pitkään.

Ensimmäinen osa. Yhdistävät tyylit ja js tiedostot.

Yhdistetään ensin kaikki tarvittavat tyylit standardin mukaan ja lisätään tiedostot js, joita tarvitaan tälle skriptille. Ensin sisällytämme tyylitiedoston demo.css.

Sitten yhdistämme kirjaston jquery-latest.min.js ja menu.js-tiedosto, joka vastaa valikon sisennysten ja liitosten toimivuudesta sekä korkeudessa määritetystä alkuperäisestä oikeasta sijainnista.

Toinen osa. Tiedosto index.php.

Kaikki on täällä yksinkertaista, näytämme valikon standardin kautta ulli ja tee kuoresta lohkoelementti div, jolla on tunnus valikosta, joka on täysin vuorovaikutuksessa tyylien ja tiedostojen kanssa menu.js.

Ru/news/">Uutiset

projektista

Kolmas osa. Tiedosto demo.css.

Siirrytään kiinteisiin valikkotyyleihin ja kirjoitetaan ylös tärkeimmät ominaisuudet, joiden pitäisi olla pakollisia! Ensin rekisteröidymme tunnisteelle valikosta: tausta, sijainti ja leveys. Toiseksi kohdistamme sen kaiken keskelle ja asetamme korkeuden.

#valikko ( tausta:#ab4040; leveys:100%; sijainti:kiinteä; ) #menu ul( margin:0 auto; leveys:750px; korkeus:40px; )

Sitten työskentelemme jokaisen valikkoelementin tai pikemminkin linkkien kanssa ja määritämme niille seuraavat ominaisuudet.

Yksittäiset hover-ominaisuudet, kehykset jne. ovat vain kauneuden vuoksi ja niitä pidetään valinnaisina.

#menu ul li ( float:left; list-style:none; leveys:140px; text-align:center; border-right:1px inset #d0d0d0; height:40px; ) .menuleft( border-left:1px inset #d0d0d0 ; ) #menu ul li a ( rivin korkeus: 40px; tekstin koristelu: ei mitään; väri: #ffffff; ) #menu ul li:hover( box-shadow:0 1px 0 #ab4040; background:#f43e3e; )

Neljäs osa. Tiedosto menu.js.

Nyt meillä on mielenkiintoisin osa. Korjaamme ruokalistamme sille tasolle, missä sitä tarvitsemme. Kirjoitetaan muuttuja menu_height, johon tallennamme sivustomme otsikon korkeuden. Näin voit kiinnittää valikon tarkasti halutulle etäisyydelle sivuston otsikosta sivua vierittäessäsi. Vaihtelevassa muodossa elementti, tallennamme id-ominaisuudet valikko ja aseta omaisuus alkuun, joka osoittaa, että valikko on yläreunassa, ja vertaamalla muuttujaan menu_top, laske tarvittava etäisyys otsikosta valikkoon.