Hyvin usein sivustoilla, joilla on paljon sisältöä, vierailija eksyy sivulle ja hänen on vieritettävä sivun yläosaan löytääkseen navigointivalikon. Tekniikat eivät pysähdy, näyttöjen näytöt ja niiden resoluutiot ovat kasvamassa, joten nyt verkkosivulla ei ole enää sääli varata 40 pikseliä päälle kiinteää valikkoa sivua selattaessa. Vierailija näkee aina, missä osiossa hän on, sekä pääsee nopeasti navigointivalikkoon. Viime kädessä tämä lisää sivuston selaamisen syvyyttä :)
Mikä on verkkosivuston kiinteän navigointivalikon ydin? Aluksi valikkomme sijaitsee tavallisella paikallaan, jossain otsikossa, minun tapauksessani 140px etäisyydellä yläreunasta. Heti kun vierailija vierittää sivua samoilla 140 pikselillä alareunassa, valikko kiinnittyy ikkunan yläosaan ja pysyy siellä loppuajan, kunnes vieritys palaa yläasentoon.
Kiinteä valikko sivua vieritettäessä on pohjimmiltaan ohjauspaneeli, joka on aina mukanasi. Ruokalistamme tulee olemaan yksinkertainen.
Teoriasta käytäntöön. Kaikki on melko yksinkertaista ja minimalistista, joista suurin osa on annettu tyyleille, joita voit mukauttaa itsellesi. Tein kiinteän valikon kuten kuvassa, rullattaessa valikon väri muuttuu hieman läpinäkyväksi, jotta se ei näytä raskaalta ja alla oleva sisältö näkyy.
Meidän tyylimme. Minulla on valikko, jonka leveys on 1180 pikseliä ja joka sijaitsee keskellä. Otsikko on 180 pikseliä korkea, vierivä valikko sisältyy siihen ja vie 40 kuvapistettä. Tämä tarkoittaa etäisyyttä ylhäältä 140 pikseliä. Muistetaan tämä numero)
#header ( korkeus: 180px; ) #navigation( tausta: #EF0505; korkeus: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-koko: 16px; rivin korkeus: 40px; sijainti: suhteellinen; ylhäällä: 140px; ) #navigation.fixed( sijainti: kiinteä; ylhäällä: 0; leveys: 100%; tausta: rgba(239, 5, 5, 0.95); ) #navigation ul(leveys: 1180px; täyte -vasen: 0; marginaali: 0 automaattinen; näyttö: lohko; ) #menu li( float: vasen; listatyyli: ei mitään; täyte: 0 25px; reunus-oikea: 1px kiinteä #D60000; ) #valikko a ( väri: #fff; tekstin koristelu: ei mitään; fonttiperhe: Verdana; ) #menu>li a:hover( väri: #656565; siirtymä: väri 0,5s helppous; )
Ja tässä on muutama koodirivi, jotka tekevät taikuuden) Asetamme ehdot sivun vierittämiselle, yli 140 pikseliä tai alle. Tästä riippuen kiinteä luokka on määritetty navigointivalikkoomme. Ja tällä luokalla, kuten edellä todettiin, teemme valikon kiinteäksi ja kiinnitetyksi yläosaan.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()
Huomaa, että jos koodissa on yksittäisiä lainausmerkkejä echo "" -merkin sisällä, ne on erotettava, ts. laita kenoviiva (\") jokaisen eteen, tietysti ilman sulkuja.
Yleisesti ottaen kävi niin kuin kävi. Sinun on itse päätettävä, miten liität tämän aiheeseesi - kun sinulla on aikaa, on jopa hauskaa "rata aivoasi". Kiitos.
Onnea sinulle! Nähdään pian blogisivuston sivuilla
Saatat olla kiinnostunut
WebPoint PRO on responsiivinen WordPress-teema, jossa on laajat toiminnot ja asiantunteva tekninen hakukoneoptimointi 
Share42 - skripti sosiaalisen verkostoitumisen painikkeiden ja kirjanmerkkien lisäämiseksi sivustolle (on kelluva paneelivaihtoehto)
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.
