CSS -> Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel

A feladat hasonló az előző leckében vett függőleges legördülő menühöz, csak most vízszintesen készítjük el.
Első lépésként (bepótolva elmaradásom) egy sima vízszintes menüt készítünk.

A vízszintes menü

Vegyük először szokás szerint a HTML részt

Mint az korábbi cikkben, itt is a menü alapjául szolgáló listát egy dobozba tettem.
A lista bonyolult részeket nem tartalmaz.
A rendezelten listába három listapontot tettem. (Értelemszerűen ezek lesznek a menüpontok)
Megemlítenén, hogy ez nem kötelező eljárás. Hagyhatjuk a listánkat, "magában" is, de akkor előnyos, ha ellátjuk egy egyedi azonosítóval.

A menü stílusa

a.) A "menu" azonosítójú DIV-et elláttam float:left; tulajdonsággal, hogy ne follyon ki belőle a listánk.
A width:100%; tulajdonsággal a DIV szélessége az oldal szélességével lesz egyenlő; így a "menu" alatt levő elemek nem fogják körülfolyni a dobozunkat.
(megoldható úgyis hogy a dobozunk alatt levő elemeknek clear:both; tulajdonságot adunk)

b.) A feladatunk lényege, hogy az egyes menüpontok ne egymás alatt helyezkedjenek el, hanem egymás mellet vízszintesen.
Ehhez használnunk kell a float: left; tulajdonságot a következő módon.

Az első egység beállításaival eltüntettem a listamegjelölőket.
Majd a margin, és a padding beállításával a menünket kicsit helyretettem az adott DIV-ben.
Ha nem teszzük dobozba a listát, akkor az ul tagnak position: relative; (vagy absolute) megadással a megfelelő helyre igazíthatjuk.

A második részben a li tagot formáztam.
Az egész listánk vízszintességét az itt megadott float: left; tulajdonság adja.
Ezzel egymás mellé folyatjuk az egyes listapontokat így alkotva meg a menünk formáját.
Adtam 60px szélességet is, így megakadályozva, hogy a listából a menüfelírások kilógjanak.
Ha hosszab szöveget szeretnél és az mindeképp kilóg, természetesen nagyobb értéket is adhatsz.

c.) Most a fenti beállításokkal elértük, hogy a menü horizontális legyen, de a benne levő linkek nem töltik ki a rendelkezésükre álló helyet.

A sok egyébb "szépítő" beállítás mellet láthatjuk, hogy ellátam a linkeket a display: block; tulajdonsággal is.
Ezzel a beállítással elérjük, hogy a linkek teljesen kitöltsék a 60 pixel széles helyüket.
Így a fehasználónak elég csak az adott listapont fölé mennie, nem kell közvetlen a link szövege fölé, hisz így már a link "érzőmezője" kiterjedt az egész listapontra.

Vízszintes menü, legördülő almenükkel

A fenti részeket kiegészítem pár sorral, és bemutatom, hogy lehet egy egyszerű vízszintes menüből almenüket kivarázsolni.
A vízszintes legördülős menü

A HTML

Az előbbi listához hozzátettem egy kis kiegészítést.
Ezek az almenük.
Mint látjuk egyes főmenükhöz tartoznak almenük.
Ezek az almenük újabb listák.
Tehát az újabb listákat beletettem azokba a listapontokba ahova (fömenü szerint) tartoznak.

CSS

Minden maradt a régiben (nem írom le azokat a részeket amik az előzőhöz képest nem változtak), egyetlen helyhez tettem egy kis kiegészítést, és bevezetettem három új formázási egységet.
A listpontokat ellátam a position: absolute; beállításal.
Így biztosak lehetünk, hogy listapontjaink a megfelelő helyen lesznek, és nem fogják a menünk alatti tartalmat lejjeb tolni.

A #menu ul ul szelektorral kiválaszottam az almenü rendezetlen listáját.
position: absolute; beállításal biztosítottam a lista megfelelő elhelyezését.
A display: none; tulajdonsággal eltüntettem az almenüket, hisz addig ezeknek nem szabad megjelenniük, amíg a felhasználó az adott főmenüpontra nem lép.

Most jön a menü lényege.
Feljebb leírtam már, de most mégegyszer.

Tehát a szelektorral megadtam a következőt (a lényegét írom le): ha a felhszanáló valamely főmenüre (elsődleges listapontra) lép, akkor az abból következő almenü (másodalgos lista) megjelenjen.
A megjelenést a display: none; beállítással értem el. A legördülő menü emiatt nem vízszintes lesz, hamem függőleges elrendezésű.

Az Internet Explorer

Az előző leckében már említett, hogy mindezek a :hover pszeudo osztály miatt nem mennek IE-ben.
Az IE csak a linkekre tudja ezt alkalmazni.
Nézzük a megoldást.

Csak röviden mondanám el a lényegét.
Ha fájlunk egy IE böngészővel találkozik, akkot életbe lépteti a fenti kódot kiegészítve vagy felülírva a többit.
A behavior: url(csshover.htc); sorral a probléma megoldását a csshover.htc JScript fájlt életbe léptetjük.
Ezzel az IE már tudni fogja nem csak linkekre alkamazni a :hover pszeudo osztályt.
A linkeknek adott height: 1%; beállítással elérjük, hogy Explorer alatt is mindig! a linkek hatóköre kiterjedjen az egész listapontra.
csshover.htc
Vagy: http://outesticide.netoktato.hu/csshover.htc