Viime aikoina jotkut sivustot, kuten Tämä on prikaati ja Kaikki te , ovat alkaneet tuottaa dynaamista ja animoitua valikkoa, joka muuttuu vierittämällä alaspäin. Pikanavigoinnin pienentäminen, jotta sisältöä voidaan käyttää enemmän. Tässä opetusohjelmassa kerron, miten voit luoda tämän valikon itse HTML5: llä, CSS3: lla ja vain jQueryllä.
Tällainen valikko on erinomainen, jos haluat keskittyä sisältöön koko verkkosivustossa, ja sen avulla voit myös luoda suuremman ja tehokkaamman navigoinnin käyttäjän ensimmäiseen verkkosivustolla käymiseen. Voit paremmin näyttää sivustosi brändin tai logon, mikä sopii mainiosti fold -näkymään; ja sen jälkeen, kun käyttäjä on käynyt vierailussa, pienempi ja minimoitu versio piiloutuu hienosti, jotta käyttäjä voi keskittyä lähinnä sisältöösi.
On useita tapoja tehdä tämä. Tässä opetusohjelmassa kerron, miten luodaan koko leveä kiinteä valikkopalkki, joka muuttuu korkeudella yhdessä logon kanssa ja luo yksinkertaisen minimoitu versio alkuperäisestä. Jos haluat, voit myös korvata logon kuvan muulla logon muunnelmalla, kuten alkukirjaimilla tai kuvakkeella, mutta muista, että johdonmukaisuus on todella tärkeä tässä, jotta käyttäjä ymmärtää, miten elementti on muuttunut ja että sen päätavoite on edelleen alkuperäinen; navigointi verkkosivuilla.
Ennen kuin aloitamme, voit kassalla demo tai lataa lähde täältä .
Aloitamme luomalla tarvitsemamme perus-HTML-koodin. Pidämme kiinni todella yksinkertaisesta HTML5-rakenteesta lähtökohtana.
How to create a dynamic top bar | Webdesigner Depot Nyt, kun alkuperäinen HTML-koodi on valmis, lisätään valikon koodi samoin kuin muutamia muita tietoja HTML-tiedoston päästä.
How to create a resizing menu bar | Webdesigner Depot Otetaan tämä valikko pieneksi!
Viivan loppu.
In our
: lisäsimme sisällönkuvaimen tekijälle tiedoston luojan tunnistamiseksi. Tämän jälkeen otimme mukaan Eric Meyerin kuuluisat reset.css-tiedostot, jotka palauttavat lähes kaikki HTML-tiedostosi elementit ja antavat sinulle puhtaamman ja helpomman asiakirjan. Ja koska käytämme jQueryä myöhemmin, pääosion lopullisessa rivissä tuemme sen jQuery CDN: n kautta.Pidäin yhteys useimpiin tiedostoihin pitämään asiakirjan mahdollisimman yksinkertaisena, mutta muista, että jos haluat, voit ladata kaikkien näiden tiedostojen viimeisimmät versiot ja käyttää niitä paikallisesti HTML-tiedostosi mukana, mikä estää mahdolliset ongelmat versioiden yhteensopivuus tai muutoksia näissä tiedostoissa tulevaisuudessa.
Meidän
koodia käytimme oletusarvoista HTML5-koodia