Í þessari einkatími munum við líta á þær aðferðir sem þarf til að gera leiðsagnarvalmynd sem er falin af skjánum þar til notandinn smellir á valmyndartákn, þar sem efnið renna yfir og myrkir og valmyndin renna inn. Valmyndin mun einnig Vertu móttækilegur lóðrétt með því að fylla hæð vafraglugganum á hvaða stærðarskjá sem er að skoða.

Til að ná þessu munum við nota nokkrar mismunandi aðferðir, þar af leiðandi að vera flexbox, sem er að verða raunverulegt "buzzword" í augnablikinu fyrir að vera heilagur gral af vefuppsetningaraðferðum. Við munum nota það til að gera valmyndina passa hæð gluggans. Við munum einnig nota jQuery fyrir raunverulegan virkni í valmyndinni, sem gerir það renna út á smellaratburð og einnig að veita fallback fyrir ef notandinn hefur ekki Javascript virkt í vafranum sínum (sem við munum uppgötva með Modernizr ).

Hér er hvernig það lítur út þegar lokið. Og ef þú vilt fylgja með fullt númerið sem þú getur sækja það hér.

Byrjaðu með merkingu

Fyrst og fremst lítum við á index.html skrá sem verður notuð í kynningu okkar, ég mun sýna þér allt sem er þarna og þá getum við farið í gegnum stykki fyrir stykki og skoðað mikilvægu hlutina:

  Full Hæð Off Skjár Valmynd 
☰
Heim
Um
Vinna
Blogg
Hafa samband
  Titill gr 
  Útgefið 25. febrúar 2014 
  Þú ert sem stendur ekki búin / nn að innskrá þig. Þú ert ekki innskráð / ur.  Heiltölur óháð því.  Gera frelsi.  Sæktu þér það sem þú vilt.  Sed nisi.  Nulla er það sem er í meginatriðum.  Duis sagittis ipsum.  Tilkynna mauris.  Ekki er víst að þú hafir augu sempar porta.  Mauris massa.  Halda áfram að versla.  Class viðeigandi taciti sociosqu ad litora torquent eftir conubia nostra, per inceptos himenaeos.  Sykurhúðaður hýdroði í friði.  Sed dignissim lacinia nunc. Lesa meira →
  O.fl. 
  Útgefið 25. febrúar 2014 
  ... Lesa meira →
<Eldri færslur

Let's dig in! The only thing to note in the merki er að við erum að hringja í sumum Google letur. Við erum líka að tengja við css skrá okkar og skrá modernizr.js sem þú getur hlaða niður héðan sem við munum nota til að uppgötva hvort vafrinn notandinn hefur JavaScript virkt eða ekki, svo að við getum veitt fallback (þess vegna er HTML-merkið með bekknum "nei-js" til að byrja með til að búa til sjálfgefið síðu sem mun birtast ef það er ekkert JavaScript, ef það er gert virkt, mun Modernizr skipta um það kennitölu fyrir okkur).

Næst eini annar raunverulegur hluti sem vekur áhuga okkar á fallback flakk sem er

með nafninu 'fallback-nav' í
eins og heilbrigður eins og the hlekkur með auðkenni "Navicon" sem verður aðal tengilinn notaður til að búa til áhrif okkar. Og þá