Gördülő menü css
Kezdeni, felhívni két kép:
Ezek két részből egy menüt. A jogot, hogy olyan hosszú, mint amikor a kiválasztott betűméret a képen elhelyezett leghosszabb szó minden részéből a lista. Nos, például a "supermegakulforumblinvasche!". Mind a kép van osztva két részre, az egyik a másik alatt. A felső rész - az eredeti állapot, az alsó - aktív, amikor az egér.
Az elv nagyon egyszerű és elegáns: a stíluslap meghatározzuk a különböző államok különböző koordinátáit a képet. Vagyis a kép betöltődik egészében, de az oldalon, amit eredetileg is csak a felső részt. Ha összeadjuk a kulcsot, az egér, hogyan kell „pop-up” az alsó részén.
Tehát, képek elő. A stílus lap, írunk a következő kódot:
#menu szélesség: 860px;
magasság: 39px;
margin: 0 auto;
háttér: # 69c;
font: 90% «Comic Sans MS», Verdana, Arial, talpatlan;
line-height: 1.8em;
clear: both;
>
#menu ul padding: 5px 10px 0 30px;
list-style: none;
>
#menu li display: inline;
>
#menu a float: left;
background: url (images / tableft.gif) no-repeat bal felső;
padding: 0 0 0 4 képpont;
>
#menu fesztávú float: left;
background: url (images / tabright.gif) no-repeat jobb felső;
padding: 20px 4px 5px 10px;
szín: #fff;
>
#menu a: hover span color: # FF9834;
>
#menu egy: hover háttér-helyzetben: 0% -42px;
>
#menu egy: hover span background-position: 100% -42px;
>
#menu li.active float: left;
color: # FF9834;
background: url (images / tableft.gif) no-repeat bal felső;
background-position: 0% -42px;
padding: 0 0 0 4 képpont;
>
#menu li.active span float: left;
background: url (images / tabright.gif) no-repeat jobb felső;
padding: 20px 4px 5px 10px;
background-position: 100% -42px;
>
Nézzük a rekord részletesen. A szélessége 860 képpont menüblokk magassága 39px, auto-központú kijelző, kék háttér és tisztító mindkét oldalon, hogy a jobb vagy a bal semmi extra nem kapott ki.
Ezután meg egy listát ul mező és szüntesse meg a kijelzőn markerek. Ezért van egy lista az úgynevezett jelöletlen.
Következő, pont a lista li hely „in-line”, egyébként az alapértelmezett böngésző mindig tedd fel egy oszlopra.
De a következő két szabály nagyon érdekes. Mindkét stílus, hogy a hivatkozások, de a második volt egy furcsa szót span. Miért van ez?
A tény az, hogy kell kötni a gombbal a képre címkéket a háttérben. Ebben az esetben van egy tag - . Háttér kötődnek csak a kiindulási címkét. K privyazhesh többé semmit. Ezért vezettük be egy további címke span. Ez az úgynevezett semleges. mert bárhol lehet használni, és önmagában nem hordoz jelentős terhelést sem.
Tehát kötve az első kép (a háttérben) címkézni a. és a második a span. És az első helyen feltüntetett bal felső sarokban, és megtiltotta neki, hogy meg kell ismételni, és a második - a jobb felső, és anélkül, hogy az ismétlés.
A mezők itt is kérte, hogy ne akárhogyan. Először is azt jelezte, a bal kép visszavonulni a bal szélétől 4 pixel, ez csak a kép szélességét. Ha ez nem történik meg, akkor a jobb oldali kép, ami nyilvánvalóan szélesebb egyszerűen „enni” a bal oldalon, mert a címet a szakaszok, még mindig nem túl hosszú.
Ami a mezőket a megfelelő képet, arra kértük őket, mint a jogot a rész volt az azonos mennyiségű helyet, mint a bal és a jobb (egyébként a böngésző „podozhmet” szót vérzés). Általában kísérletet és láthassa. )
Referencia kérték, a fehér szín (fehér, zöld - csak imádom!). És az aktív - narancs fehér.
A következő két szabály csak megrendelni kép elrejteni a tetején és alján a kijelzőn, ha fölé viszi őket az egérrel. Ezt úgy tehetjük meg azt a helymeghatározás. A bal oldali kép már jelzett 0% pozíció (azaz a bal szélső pozíció) és a mínusz 42 pixel. Vagyis, mi egyszerűen „elvették” tőle tetején. És mivel a kép eredetileg betöltött az oldal teljesen, úgy fogja mutatni nekünk az alsó részét. A jobb oldali kép már utaltunk, illetve 100% -os helyzetbe (szélsőjobboldali), valamint mínusz 42 pixel.
A kérdés az, hogy miért nem azonnal látni a teljes képet az oldalon? És mivel a legelején menyushek blokk kértük magassága 39 pixel (lehet 42, de mivel a különböző böngészők hinni árrés, akkor viszontbiztosítva egy kicsit). Olyasmi, mint egy ablakot. Emlékezz szovjet filmek Sherlock Holmes? Ott a legelején okos feliratok formájában mező bukovok? Ezek indukált fekete stencil résekkel és kapott értelmes szavakat. Ez körülbelül ugyanazt az elvet, és tette a menüben. Ez egyszerű. )
Két további szabályt írtunk az aktív partíció. Nyilvánvaló az is, - az aktív partíciót kell hivatkozni, de egyértelműen fel kell tüntetni, hogy a jelenleg aktív. Ez az, hogy néz ki, ha a link esett egér. Itt is a parancs a kép ravasz kandikál alsó rész, de azok már nem rögzített a link címkék és címkék listáját húrok - li.
Ne felejtsük el, hogy lezárja a bal mindig jelzi - (float: left;). Ellenkező esetben, hibák elkerülhetetlenek.
Úgy tűnik, ez minden. De IE még mindig a böngészőt a természet és a gyönyörű menü, például a csúnya torz. (Ez a lecke nem látható, de az összegyűjtött teljes oldalt kap valamilyen lúg a menü és a fő egységet. Ez csak azért történik, mert az IE (ellentétben más böngészők) a saját kiszámítja a méret a mezők és a margók. Ilyen felháborító ravasz webes tervezők jöttek fel nem kevésbé ravasz csavar nevezett hack Azaz, fűszereket IE a stílus lap egy postscript (gyakran jelzi a változat IE). „... e pogányokat mutatni a ragyogó menyuhu mint ez: (majd további szabály) ...”.
Ez a hack is felkerült az alaplemez stílusok és rögzítheti külön lapon megadva a megfelelő linkre. Mi így is tett, és rögzítse az oldal egy másik css. szólította egyszerűen ie.css. Ebben, mi írjuk a következőket:
#menu fesztávolsága padding: 4px 20px 4px 10px;
>
#menu li.active span padding: 4px 20px 4px 10px;
>
Mint látható, ellentétben az alaplap, ahol jelezték alsó mező egy kisebb pixel (4 helyett 5). Ez az egész baj.
És végül, a nagyon kódot az oldal (itt csak menyuha, az összes többi feltett az oldalcímék elhagyjuk):