7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Responsive Web Design

Hogyan készíts fogékony, görgethető paneleket Flexboxszal

Read Time: 2 mins

Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)

Ha kitartottál a ZURB munkával amit az Alapok az Alkalmazásaidhoz-zal csináltál, talán észrevetted, hogy a legtöbb demo sablonuknak nagyon csinos, görgethető panelük van.

Ezek valójában nagyon hihetetlenek-különösen hibrid alkalmazásokhoz. Emlékezz, hogy milyen praktikus kerek voltak, mielőtt kimentek a divatból? Hát, most visszahozhatod ezt a funkcionalitást, de egy fogékony módon.

Némi bóklás után, képes voltam kinyomni az alap funkcionalitásait ezeknek a paneleknek és ez az amit meg fogunk tanulni, hogyan csináljuk újra ma.

1. Kezdjük az elején

Néhány nagyon alap jelöléssel fogunk kezdeni. A legfontosabb rész egy csomagoló konténer, hogy becsomagoljuk az egész oldaladat.

2. CSS

A dolgok érdekessé válnak a CSS-ben nagyon gyorsan. Először, akarjuk a html és body kiválasztóinkat, hogy legyenek height:100%. Azért csináljuk ezt, hogy beállítsuk a .wrap elemet amit be fogunk állítani height: 100vh-ra. A vh egységgel azt mondjuk, hogy a néztablak teljes magasságára akarjuk felvinni az alkalmazást , szóval a tartalmazott elemekkel rá lesz erőltetve, hogy gördüljön.

Továbbá beállítjuk a .wrapet, hogy legyen display:flex , szóval hozzáadhatunk gyerek elemeket egy flex ingatlanhoz.

Megjegyzés: A számos szintaxisokra való emlékezés helyett a Flexboxhoz az évek során, próbáld ki az Autoprefixer használatát. Ezután szükséged lesz a W3C speciális szintaxis használatára és ez meg fogja csinálni a támogatás maradék részét annyi böngésző felé amennyi lehetséges.

3. Rugalmassá válás

Most itt van nekünk ez a "héj" beállítás amibe elkezdhetünk stílizálni nagyon alapvető, rugalmas elemeket. Az egyetlen trükk, hogy megbizonyosodj ezek a gyerek elemek beállításáról overflow-y: scroll-ra, hogy érvényesítesz egy görgetősávot.

4. Fogékonnyá válás

Kerüljünk egy lépéssel közelebb és tegyük az oldalunkat fogékonnyá az oldalsáv felhalmozásával a tartalom terület tetején kisebb eszközöknek. Ez olyan könnyű, mint egy CSS szabály hozzáadása egy média lekérdezésen belül.

Következtetés

Ezeknek a lépéseknek elégnek kell lenniük, hogy elindítsanak ennek a technikának a használatán a weboldalaidon keresztül. Most már tudom hogyan kell csinálni, megkeresem az összes fajtáját a helyeknek betenni ezeket a görgethető paneleket.

Hogy lásd ezt akcióban működni, nézd meg a demót Codepenen. Továbbá, nézz rá a nem hivatalos Stylus újratervezésre amit építettem ennek a technikának a használatával.

Hogy látod a használatát?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.