CSS -> Függőleges menü készítése listából

Az előző cikksorozatot befejezve, új munkába fogtam. Most gyakorlatiasabb leckék lesznek, melyek (reményem szerint) még jobban bemutatják a CSS-ben rejlő lehetőségeket. Megpróbálom szemléltetni alkalmazási területeit, használhatóságát.
Az elkövetkezendő leckék az eddig tanult anyagokra épülnek, így aki itt kezdené az olvasást, és nem teljesen világos számára a CSS alapjai, annak ajánlom olvassa el az eddigi
anyagokat.

A mai leckében egy listára épülő menüt készítünk. Először tekintsük meg a lecke végeredményét.

1. A HTML rész

A menü egy listára épül, amit egy DIV-ben helyeztem el. A listába tetszőleges menniységű listaelemet tehetünk, a menüpontok számától függően. Mivel ez egy menü, így nem pusztán szöveggel töltöttem fel, hanem hivatkozásokkal.

A DIV-nek előnyös azonosítót adni, mert ezzel megkönnyítsük a munkáknkat vele. Nemes egyszerűséggel "menu"-nek neveztem.

1. A CSS rész

1. Adott egy DIV és benne a listánk. Először helyezzük el a DIV-et a megfelelő helyre. Én most középre fogom igazítani, egy kis trükkel.

Nézzük végig. A dobozt relative pozícionálással igazítom középre. A margin-left: auto és margin-right: auto a pozicionálás miatt a dobozt középre fogja igazítni. Ez csak FireFoxra érvényes.
Internet Exploreben ezt a text-align: center tulajdonsággal érhetjük el.

szerk.> Ne felejtsük el meghatározni a HTML típusát! Anélkül Internet Explorerünk nem fogja középre pozícionálni a kívánt elemet.


Továbbá a doboznak adtam egy fix szélességet, szintén a középre igazítás érdekében. Ha megfigyelitek a DIV így mindég
középen fog maradni, felbontástól, böngészőtől, és a böngészőablak méretétől függetlenül.

2. Következzen a rendezetlen lista.

A szelektor ebben az esetben #menu ul, ami csak a menu DIV-ben levő listára/listákra érvényes. A listajelölőket a design miatt most nem alkalmazom, értékét none-ra állítottam. A margókat, és a kitöltést 0-ra állítottam, így a lista körül nem lesz üres hézag. Ezzel a megadási móddal az összes oldal margója illetve kitöltése 0 lesz. Itt is adtam szélességet, és mivel a doboznak középreigazított szövege van (IE-doboz középreigazítása), itt az elrendezés miatt text-align: left, azaz balraigazított tulajdonságot adtam. A további két formázás már csak a menü megjelenésén finomít.

3. A listaelemek.

A listapontok margója szintén nulla, de ízlés szerint adhatunk nagyobb értéket is. Ilyenkor arra kell figyelni, hogy a fix szélesség miatt a menüpotok tartalma elcsúszhat, egyik menüpont vastagabb lehet mint a másik. Így ha növeltük, adjunk a szélességre is plussz pár pixelt. A kitöltés tulajdonság értéke 1px, amit a design miatt állítottem be. Értéke lehez nulla is, ez már részletkérdés, avagy ízlés dolga.

4. Végül a menünk lelke, a linkek.

Ebben az esetben két fontos dolgot emelnék ki. A display: block, és a padding: 5px 10px. A padding-nak csak két értéket adtam. Így egyszerre állítottam be az 5px-es kitöltést lenn, és fenn, illetve 10px jobbról és balról is. Az értékek megadása esztétikai okok miatt szükséges, mert ennélkül a menüpontok közel olyan kicsik lennének mint amilyen magasak a betűk.
Elérkeztünk a legfontosabb tulajdonsághoz a fent említett display-hez. É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.
Végül az a:hover pszeudo-osztállyal, beállítottam a hivatkozás tulajdonságait. Hátterét beszineztem (ajánlom), mert ezáltal látványosabb lesz a menü.