Hogyan készítsünk egy gumi menü módon lehet létrehozni egy vízszintes navigáció az oldalon
Így az összes lehetséges opció, hogy hogyan lehet létrehozni egy gumi menü CSS. Kezdjük létrehozásával a navigációs kisbetűs (inline) elemek.
Vízszintes gumi szöveges menü
A lényeg csapódik le, hogy egyenletesen oszlatja el a szöveges elemek a teljes szélességében a navigációt. Bal és jobb (a menü határok) nincs keret, és pontosan ugyanazt a távolságot az egyes szavakat. Ennek alapján a módszer használata tulajdonságainak text-align: indokolják, amelyről ismert, hogy osztja a szöveget szélességében változtatásával közötti távolság szó, hogy valóban szükségünk van.
De ha a vonal egyik, as, sőt, meg kell, ha létrehozunk egy menüt, a szöveget nem oszlik el a teljes szélességét. Időbe fog telni egy kis trükk, hogy ez. A pszeudo: korábban, amit csak tovább tartalmat, a mérete egy sor túllépésre kerül, és a szöveg lesz nyújtva. Ez a kiegészítő tartalom (az 1. példát) nem lesz látható a metszett overflow: hidden. Lehetőség van továbbá elrejteni használatával magasság: 0 vagy visibility: hidden.
Tovább kód árnyalatok szavak egyes pontjaiban nem szakadt használt inline-block helyett inline (a szabályok a).
Lásd a kódot, és működő példa.
Vízszintes menü a blokk ugyanaz behúzás
A Flexible Box modell
Sokáig voltam érdekelt a kérdés, hogyan lehet létrehozni egy navigáció, amelynek szélessége tételek alakult ki a szélesség, attól függően, hogy a méret a tartalom és a hozzáadott szélesség, amelynek ugyanaz az érték minden egyes tételt. A böngésző kell számítani, ha az ablak átméretezése és hozzáadjuk a menü blokk. Hogy jobban megértsük, nézd meg a képet.
Piros nyilak mutatják a távolságot a szöveg és a jobb oldali keretben egység, ezek az extra párnázás, amelyet meg kell változtatni, és dinamikusan lehet azonos az összes elem. A távolság a szavakat, menüpontok a menü, ugyanazt a (mivel kétszeresével egyenlő behúzás).
Nézzük ezt a technikát a gyakorlatban az igényeinknek. Először is, hogy a listán ul class tartály és megkéri, hogy megjelenítse tulajdonság: mezőbe. Ez a tulajdonság egy új kijelző értéket, és tájékoztatja a böngészőt, hogy egy adott blokk kell tekinteni, mint egy speciális eleme az úgynevezett „rugalmas mező”. Lánya li elemek jelennek meg vízszintesen, köszönhetően az ingatlan box-orient.
Egy másik nagyon fontos jellemzője, hogy meg kell rendelni a menüpontok - box-flex. Ez adja meg a rugalmasságot elemek li. azaz ez határozza meg, hogyan ossza blokkok közötti szabad tér. A következő példa a menüpontok beállítása box-flex: 1. így tudják elosztani a rendelkezésre álló teret, egyenlő arányban. Így a kitűzött feladat megoldására van megoldva.
Az alábbi HTML és CSS kódot, valamint egy gyakorlati példát a menü működését.
A display: asztal (vagy táblázatok)
Minden jó lenne az első kiviteli ha nem lenne jelentős hátránya - böngésző támogatja gyenge, és annak érdekében, hogy legalább néhány cross-böngésző használata saját tulajdonságai böngésző előtagokat. Mint például -moz (Firefox), -webkit (Chrome és minden böngésző alapú króm, beleértve a legújabb verzióját az Opera - a fejlesztők elhagyták ismert alkalmazása Presto motor), c támogatja a régebbi Opera és az Internet Explorer még rosszabb.
Ezért célszerű, hogy más módszert alkalmaznak, többé-kevésbé cross-browser. Az első dolog, ami eszébe jut - az asztalra. De itt mi várható csalódás: míg az elemek körülbelül azonos hosszúságú a normál menü nézetének elvileg csak meg egy hosszú vagy rövid pont - a táblázat lesz csúnya aránytalan. Egy hosszú bekezdés behúzás sokkal több, mint a többi, illetve sokkal nagyobb egy rövid bekezdés a legkisebb árrés - ez a legrövidebb. Úgy látszik, ez annak a ténynek köszönhető, mint az asztal újraosztja szabad hely: minél nagyobb a szélessége a tárgy - több extra helyet kiosztott a meglévő. És mert ez a nem egyenletesség kapott ilyen ronda torzítás.
Hogyan lehet megoldani? Például ha ehhez még hozzáadjuk a cella szélessége tulajdonság: 1%, akkor változik a helyzet gyökeresen. Pontos magyarázat nem tud adni, azt feltételezik, hogy ha a szélessége a sejtek azonos, és minden bizonnyal kevesebb, mint a tartalom a szabad hely kezd egyenlően oszlik meg őket. Bármi nem magyarázható, a kimenet azt az eredményt kapjuk, hogy szinte azonos a használata Flexible Box modell.
A következő kód ezt az opciót navigációt.