Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 362329

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [55267]
2. CSS
Bevezetés a CSS alapjaiba [30763]
3. CSS
A pozícionálás, és a z-index [30252]
4. CSS
A felhasználói felület - első rész [24595]
5. CSS
Függőleges menü, legördülő almenüvel [24463]
 

 

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

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-05-16 15:53:05
Lektorálta: adrob
Lektorálva:
2006-07-31 11:56:38 [23693]
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.
<div id="menu">
   <ul>
      <li><a href="#">Első menüpont</a></li>
      <li><a href="#">Második menüpont</a></li>
      <li><a href="#">Harmadik menüpont</a></li>
      <li><a href="#">Negyedik menüpont</a></li>
      <li><a href="#">Ötödik menüpont</a></li>
      <li><a href="#">Hatodik menüpont</a></li>
      <li><a href="#">Hetedik menüpont</a></li>
   </ul>
</div>

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.
#menu{
      position: relative;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      width: 150px;
}

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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


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.
#menu ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      width: 150px;
      text-align: left;
      border: 1px solid #FFFFFF;
      background-color: #FFFFFF;
}

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.
#menu ul li{
      margin: 0;
      padding: 1px;  
}

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.
#menu ul li a{
      color: #999999;
      text-decoration: none;
      padding: 5px 10px;
      display: block;
      border: 1px solid #ECEEE4;
      background-color: #F4F6F4;
}

#menu ul li a:hover{
      color: #72815F;
      text-decoration: none;
      background-color: #DAE6BD;
}

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ü.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!