CSS -> Függőleges menü, legördülő almenüvel

Ebben a leckében egy függőleges menüt fogunk készíteni, legördülő almenükkel.
Nézzük meg.

1. A HTML

A menünk gerincét alkotó lista, egy "menu" azonosítójú DIV-ben van.
Minkenképp előnyös a listán alapulú menüt dobozba rakni, hiszen így jobban el lehet választani az oldal többi részétől, illetve a stíluslapban könnyebben, ésszerűbben lehet megadni az elérési útját, vagyis később jobban átláthatóbb lesz a CSS fájlunk.
(Igaz, egyszerűen doboz nélkül is meglehet adni a listát, úgyis tudjuk pozicionálni akárcsak a DIV-et.)
A listánk érdekessége, hogy a fő lista listaelemeiben, egy újabb lista van.
Erre azért van szükség, mert a menünk egyes menüpontjaiból (ezeket nevezzük fő menüpontoknak), újabb opciók (almenük) fognak előjönni ha a felhasználó föléjük megy.
Amelyik fő menüponthoz, további almenüt szeretnénk, akkor csak illeszünk be egy újabb listát az adott főmenühöz, a következőképp.

Mint látjuk a listelemben megadtuk a menüpont címét/feliratát (Első).
(Ennek nem szükséges linknek lennie, hisz ha további opciói vannak, akkor úgyse lenne linkként szerepe esetünkben.)
Utána ugyanebben a listapontba beillesztettük a további opciókat tartalmazó listánkat.
Tehát az Első nevezetű ponthoz tartoznak a Második elnevezésű alpontok.

2. A CSS

a.) A DIV tulajdonságai

A dobozunkat középre igazítottuk a már tanult módszerrel.
Utánna 200 pixeles szélességet állítottunk be.
Ügyeljünk arra, hogy a doboz szélessége megyezzen a későbbi lista szélességével.
Többre most nem lesz szükségünk, de természetes pozicionálható a megfelelő heylre.

b.) A linkek/feliratok tulajdonságai.

Itt kiemelném a display: block beállítást.
Értékének block-ra állításával a linkek blokk szintű elhelyezést kapnak.
Ha kihagynám ezt a formázást, menüpontjaink egymásra csúsznának (padding miatt) és a szövegmérettől függően nem töltenék ki a lista teljes szélességét.
Beállítottam továbbá a link szövegének vastagságát, méretét és betűtípusát, majd a link színét, hátterét.
A padding és a margin beállítása nagyrészt a menü kinézetében játszik szerepet.

c.) A rendezetlen lista.

Nézzük sorba.

Az első egységben a listamegjelölőket eltüntettem a list-style-type: none; beállítással.
Utánna a margin, illetve padding tulajdonságok értékét 0-ra állítottam.
Ez a lista megjelenésében fontos szerepet játszik, mivel így a rendezetlen listánk (ha van beállított háttérszíne) nem fog látszani a linkek mellet.

A második egységben a listapontokba ágyazott listát formázzuk, tehát a legördülő almenüt.
Ezt a #menu ul li ul kiválaszátssal érjük el.
Rövidebben is megadhatjuk: #menu ul ul.
Itt is ugyanaz a hatás, csak rögtön a második rendezetlen listára hivatkozunk, kihagyjuk a listapontot, amibe azt beágyaztuk.
A position: absolute;-re azért van szükségünk, mert a lenyíló almenüt, el kell helyezünk a főmenü mellé.
(Ha ezt nem tennénk meg, akkor az almenük az egész menüoszlop alatt bukkana elő.)
A pozicionálás után el kell helyeznünk pontosan a lista mellé az almenünket.
top: 0; Ezzel a tulajdonsággal a lenyíló menü, az adott fő menürészhez fog igazodni.
Tehát meg fog egyezni az oldal fölsejétől számított helyük.
A lenyílló listának a left: 100%; beállítással pontosan a fő menühoz igazítottuk balról.
Ha értelemszerűen a left: 200px;-elt alkalmazzuk, akkor pár pixel eltolódás lenne a két rész között, így inkább a biztos megoldást választva, egyszerűen 100% távolságba helyezetük el.
Később se lesz gond, hiszen, ha negváloztatjuk a főlista széleségét, a legördülő rész akkor is 100% távolságba, azaz pontosan a menü mellet lesz.

Végül a harmadik egység; az előbukkanó listát tünteti el a felhasználó elől.
Ez fontos hiszen nem akarjuk, hogy mindig a menünk mellet legyenenek az almenüpontok. Csak akkor legyenek láthatóak, ha a felhasználó valamelyik főmenüre lép.

d.) A listapontok

Itt egyszerűen az összes listapontra alkalmazzuk a position: relative; beállítást.
Ezzel a listpontok követni fogják az egyes rendezetlen listák helyeit.
A padding beállításal csak a lista kinézetét alakítottuk.

e.) A menü lelke

Mivel kicsit följebb, egyszer már eltüntettük a beágyazott listákat, így most előhozzuk őket, ha a felhasználó az adott főmenüpontra lép.
A li szelektornak is létezik pszeudo osztálya. Itt a :hover-t kihasználva (tehát, ha a li elem fölé megy az egér) előhozzuk a további opciókat.
Röviden megmagyarázva a li:hover ul-t: ,ha a felasználó a li elemre lép, akkor az ul elem látható lesz blokk szinten.
Tehát megjelenik az almenünk.

3. Internet Explorer

Természetesen mindez nem megy IE alatt.
Az explorer csak a linkekre támogatja a :hover pszeudo osztályt.
Erre született egy igen jónak tűnő megoldás Peter Nederlof kezéből.
Ez egy JScript file. Innen letöltheted.
Ezzel már menni fognak IE ben a :hover pszeudo osztállyal elátott elemek.
Az alap HTML fájlunkban meg kell adni azonban egy kis kiegészítést, mert nem megy minden úgy az explorerben, ahogy kellene.

Röviden; a fenti kód, ha IE böngészővel talákozik életbe lép, és kiegészítve az alap stíluslapunkat, helyre teszi a menünk megjelenését.
csshover.htc
Vagy: http://outesticide.netoktato.hu/csshover.htc