Legördülő menü css - minden DLE, Pirate Island, Dle
Ez a menü működik minden böngészőben, beleértve az IE 5/6.
Kezdjük szemantikus jelölés. Étlapunkon, amely három szinten egyszerre - ez egy egyszerű rendezetlen listát, és minden almenü, hogy - ez egy beágyazott listát. Ennek a megközelítésnek számos előnye van:
* Kód a menü kis helyet foglal
* Menü elérhető keresők és az alternatív kliensek
* Osztja tartalma és bemutatása, ellenőrzése a hézag kizárólag CSS
A HTML-ben, ez így néz ki:
Ne félj a mellékletek listájának. A legfontosabb dolog -, hogy kövesse a helyességét a nyitó / záró tagek. Különösen egyes alcímke-
Ez tartalmazza a címke
- .
Ez az, amit eddig: 1. lépés.
bit stílus
Most majd adjunk hozzá néhány szelet a CSS kód:
#nav, #nav ul list-style # 58; none;
margin # 58; 0;
padding # 58; 0;
határon # 58; 1px solid # 000;
háttér # 58; # 515151;
float # 58; bal oldalon;
szélesség # 58; 100%;
>
#nav li float # 58; bal oldalon;
álláspontja # 58; relatív;
háttér # 58; # 515151;
háttér # 58; none;
>
#nav li ul kijelző # 58; none;
>
A három szabály tettünk a következő dolgokat:
* Az eltávolított golyó a listánkról - list-style: none* Visszaállítása a kitöltés kitöltés és árrést menüpontok
* Díszítsd a határ menü és a háttér. Az ingatlan háttér: none adhatja minden böngésző átlátszó háttérrel, kivéve IE 5. fogom magyarázni később
* Kénytelen lista elemeit
* Híd almenü a 2. és 3. szintű, meghatározva display: none
Ha a tömb alakú elemek a float tulajdonság válnak „lebegő”. Ez lehetővé teszi, hogy építsen nekik egy sorban egymással. További információk a float tulajdonság.
Mivel minden eleme a listán-
most „lebegő”, maga a lista „összeesik”. Ez akkor fordul elő, mert az a képtelenség, hogy határozza meg a tényleges magassága az elem, amely egyéb, „lebegő” elemeket.
Az AIDS elleni küzdelemhez, számos módszer, de nem tudnak dolgozni az új IE 7. Tehát itt úgy döntött, hogy használja a FNE- módszer rendelni ingatlan float: left a tartályba. Ez megszabadít minket a „összeomlását” a lista, de ez teszi a mögöttes elemei kerületi a jobb oldalon a menü. Ezért adja a szélessége a teljes menü 100% - a jobb oldalon csak ne maradjon fenn.
Emellett ki tudtuk mutatni az ingatlan egyértelmű: mind az elem azonnali következő menüben. Ez okozott volna neki, hogy süllyed a „lebegő” elemeket.
Amit kapott: 2. lépés.
#nav színes # 58; #fff;
text-decoration # 58; none;
megjelenítéséhez # 58; blokk;
szélesség # 58; 120 képpont;
padding # 58; 4px 10px;
háttér # 58; url # 40; dot.png # 41; repeat-y jog;
>
#nav a # 58; hover color: # 58; # 000;
háttér # 58; #ccc;
>
#nav li # 58; hover háttér # 58; # 333;
>
Az első szabály elkészítettük kapcsolatok (úgy, hogy ők több, mint egy gomb):
Cél szélessége szükségszerűség, ha a tulajdonságok használatával az úszó az összes elem, kivéve elem
Selector #nav a: hover állítunk elő, ha összeadjuk a kurzort a kapcsolat és #nav li: hover - ha összeadásával azt a listaelemet. A második esetben azt kell biztosítani, hogy a menü is a „nyom” a mi mozgás (mint később látni fogjuk).
Output: 3. lépés.
Mi nem hiába nevezik „legördülő” menüben
Mi fűz egy meglévő szabályt:
#nav li ul kijelző # 58; none;
>
#nav li ul kijelző # 58; none;
álláspontja # 58; abszolút;
háttér # 58; url # 40; Fone-tr.png # 41 ;;
padding # 58; 8 képpontnál 0;
szélesség # 58; 138px;
>
Amikor a szülő elem helyezkedik el a „relatív” (azaz, amelynek összesen: .. Relatív), mind abszolút pozicionált elemek benne lévő lesz elhelyezve képest a szülő elem, de nem tekintetében az egész oldalt.
#nav li li szélessége # 58; 118px;
háttér # 58; none;
>
#nav li # 58; lebeg ul kijelző # 58; blokk;
>
A varázslat rejlik a legördülő menüben display: block for #nav li: hover ul. Ez teszi a almenü „jelenik meg”, amikor a kurzor közeledik a link helyett a korábban telepített megjelenítési mód: none:
#nav li # 58; légpárnás li ul kijelző # 58; none;
szélesség # 58; 138px;
top # 58; -9px;
bal # 58; 133px;
>
#nav li # 58; légpárnás li # 58; lebeg ul kijelző # 58; blokk;
>
A szélessége a alképpontokból 138 annak a ténynek köszönhető, hogy vonjuk 2 pixeleket a határok mindkét oldalán: 140 - 1 - 1 = 138 pixel.
Selector #nav li: hover li ul érinti a 3. szintű menü. Mi a balra tolódik a szélessége 133 pixel (tisztán tapasztalati érték), és kissé felfelé (hogy azt ugyanazon a szinten a link). Most, amikor az egeret mozgatja, mi al-menü jelenik meg a jogot a referencia.
Legördülő menüben (még nem IE): 4. lépés.
IE faktor
A sok ember életét webfejlesztők könnyebb lenne, ha nem lenne az Internet Explorer. A helyzet kezd javítása felszabadulása miatt a hetedik változat, de a széles körű terjesztését még mindig nagyon messze van.
Ez lehetővé teszi, hogy „csatolni” jshover osztály bármely elemétMost, hogy a menü megszerezte az IE, add, hogy a négy már meglévő szabályok további választó li.jshover:
#nav li # 58; lebeg,
#nav li.jshover.
>
#nav li # 58; lebeg ul,
#nav li.jshover ul.
>
#nav li # 58; légpárnás li ul,
#nav li.jshover li ul.
>
#nav li # 58; légpárnás li # 58; lebeg ul,
#nav li.jshover li.jshover ul.
>
Most meg lehet nézni, és IE: egy lépéssel 5, az utolsó.
további információk
A háttér áttetsző PNG-fájl almenüt. IE 6 nem támogatja áttetszőség, de lehet kijavítani.
Használata miatt áttetsző képeket kellett távolítani a háttér színét. Ez vezetett arra a tényre, hogy ha letiltja a képek alatti betűk nem láthatók. Csak egy kiút: állítsa be a háttérszínt #nav li, elveszti átlátszóságát.
ÉN használ egy hack háttér: none; arra kényszeríteni, hogy a szín menü IE 5. Ha ez nem történik meg, akkor a böngésző háttér nem jelenik meg. Talán ez lehet korrigálni valahogy más módon, de nem kívánnak foglalkozni az összes hirtelen fordulat.
UPD. Akella azt javasolta, hogy az egyes beállítások, a menürendszer van tele az Operában. Ez annak köszönhető, hogy a használata minden méretben az „abszolút” egység px. Pixels - gonosz.
Így készítettem egy második verzió teljesen em (kivéve a szegély szélessége). És mert ez egy pixel keret jelenhet meg a kis rések növelésével a betűméretet. Exit - Ne használja a border =)