Hogyan készítsünk egy gumi css menü adaptív 3 lépésben
Hello. Egy nagyon hosszú ideig nem írt hozzászólásokat a témában a munka html / css. Mostanában csak elkezdtem hajtani az új elrendezés és a folyamat rábukkantam egy érdekes technika, amely lehetővé teszi, hogy egy gumi menü (akkor lehet, hogy új elemeket, és a mérete nem növekszik, és mindig 100% lesz a szülő egység). Tehát ma folytatják a gumi css menü.
Gumi menü CSS - 1. lépés
Az első lépés - ez mindig html jelölés, ahol ugyanaz nélküle. De ebben az esetben minden egyszerű lesz:
- áramlási wrapper menü
- A menü is, amelyet az egy felsorolás (ul tag)
- Nos, a menü elemek belsejében, és azokon rendre már linkek
Minden világos, hogy ez az én jelölés:
Úgy néz ki, minden szabványos, valahogy így:
Most mi lesz, hogy minden a megfelelő megjelenés a munkát vesszük CSS.
2. lépés - az alap stílusok
Hozunk létre, és csatlakoztassa a stíluslapot html dokumentum. Az első dolog, amit leadott padding minden elemére.
Ezután hozzáadok egy blokk stílusú csomagolást. Nevezetesen, volt a maximális szélessége 600 pixel (csak hogy kényelmes, hogy egy screenshot a menü szünetek), és igazítsa a készüléket.
3. lépés - eladó gumi
Most vállalják maga a menü. Ő (a ul tag), leveszem a markerek teszik lineáris gradiens háttér. és ami a legfontosabb, a kijelző ingatlan: table-row teszi egy tartályt a menü úgy viselkedik, mint egy sort a táblázatban. Ez fontos a további műveletekhez.
Mint látható, a fenti kód csak úgy döntött, minden, amit írtam. By the way, ez kényelmes generál gradiensek alkalmazásával végső CSS Gradient generátor eszköz. Rajta fogok írni egyszerre.
Ezután meg kell állítani a stílus a menüpontok. Itt:
- vertical-align: alul - ez a tulajdonság szükséges ahhoz, hogy, ha a szöveg a menüben egy 2 soros, akkor megjelenik simán. Ha így teszünk a menü, akkor távolítsa el ezt a funkciót, nagyítás a terméket szállított meghúzni és a szöveget két sorba, és látni fogja a kijelző probléma. Visszatérés az ingatlan és minden rendben lesz.
- display: table-cell - ahogy arra kérték, hogy megjelenítse a menüt a táblázatos, logikus, hogy megkérdezzem, hogyan kell megjeleníteni terméket a táblázat cellájába. Ez kötelező.
- width: auto - szélessége automatikusan kerül kiszámításra, attól függően, hogy a szöveg hossza bekezdésben
- text-align: center - ez csak ki kell igazítani a szöveget belsejében közepén
- magasság: 50px - állítja a magassága 50 pixel
- Nos, határokon átnyúló jobb csak jobb, egy elválasztó elemek
És így a menü most így néz ki:
Ismét fogok magyarázni néhány sort:
4. lépés (opcionális), akkor add interaktivitás
Például ha mozog változtatni a színét a menüpont. Megvalósult meglehetősen egyszerű, segítségével ál-hover:
Tesztelés menü gumi
Kiváló kész menü, de még nem ellenőrizte a legfontosabb dolog - már amennyire ez a gumi, ahogy ígértem. Nos, újabb 2 pontot a menüben:
Menü balra a szélessége 600 képpont. A fennmaradó tételek csak egy kicsit csökkent magukat, hogy illeszkedjen 2 új.
Én hozzá 1 hosszú bekezdés:
Mint látható, a menü még mindig egy kicsit hosszú és uzhalos pont mutatkozott elég rendesen. És ha nem volt ingatlan vertical-align: alján. amelynek beszéltem néktek, a menü nézne rosszabb.
Csökkentse a menü a három pontot.
Települések lett sokkal szabadabb, de maga a menü nem változik széles. Így tettünk 100% gumi menü!
Hogyan alkalmazkodjon?
Alapvetően, ha meg a unit-wrapper nem rögzített, és a legnagyobb szélessége, akkor nem is kell igazítani. Az én esetemben van, az ingatlan max-width: 600px, és, ha a szélessége kisebb lesz, mint 600 pixel, a készülék csak akkor csökken, miután a képernyőn, anélkül, amely egy vízszintes görgetősáv.
Nos, ha azt szeretnénk, hogy valahogy változtatni, vagy megfelelő menü a mobil eszközök és széles képernyő, a média lekérdezések, hogy segítsen! Siker honlapon épületben!
Ön is érdekelt