Bánhegyesi Zoltán oldalai

5. lecke - Egyszerű menük

A leckéből megtanulhatjuk, hogy a jól ismert listákból (UL, LI, ...) hogyan lehet különféle elrendezésű menüket összerakni.

5.1. Az alapkód - a lista

Első lépés ismét a HTML kód megírása, amiben egy 4 elemből álló listát készítünk el. A "menu" nevű doboz tartalmazza a listát, amelynek az elemei természetesen linkek lesznek.

<div id="menu">
  <ul>
    <li><a href="#">Rólunk</a></li>
    <li><a href="#">Termékek</a></li>
    <li><a href="#">Szolgáltatások</a></li>
    <li><a href="#">Kapcsolat</a></li>
  </ul>
</div>

Ebből a listából készítünk a továbbiakban egy függőleges, és egy vízszintes menüt.

5.2. Függőleges helyzetű menü

Valami ilyesmit fogunk készíteni...

Először a menü-dobozt helyezzük el, méretezzük.

#menu{
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 150px;
top: 1px;
}

Egy kis magyarázat: a dobozt position: relative; margin-left: auto; és margin-right: auto; beállításokkal középre igazítjuk. (Az IE miatt még a text-align: center; is szükséges.) Végezetül a dobozt 150 pixel szélesre állítjuk.

Lássuk a lista tulajdonságait! Figyeljünk a kiválasztóra (szelektorra): ez most a #menu ul - így a beállítások csak a "menu" DIV-ben levő listákra lesznek érvényesek.

#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px;
text-align: left;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
margin-bottom: 20px;
}

A margókat, és a kitöltést 0-ra állítottuk, így a lista körül nem lesz üres hézag. Nem alkalmaztunk listajelölőket (list-style-type: none;).

A lista elemeinek a beállítása igen egyszerű, csak némi csinosításról van szó. (Érdemes itt is megfigyelni a kiválasztót!)

#menu ul li{
margin: 0;
padding: 1px;
}

Lássuk végül a lényeget, a linkeket!

#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: underline;
background-color: #DAE6BD;
}

A fentiekben a legfontosabb beállítás a display: block;. Ezzel érjük el, hogy a linkek blokk-ként viselkednek, nem csúsznak egymásra. A többi elemnek "csak" esztétikai jelentősége van, lehet és érdemes velük kísérletezni. Végezetül az a:hover látszólagos (pszeudo) osztállyal beállítottuk hogy a hivatkozás hogyan viselkedjen az egér közeledtekor.

5.3. Egyszerű vízszintes menü

Nézzük meg, hogyan tudjuk a CSS-fájl átalakításával az 5.1. pontban megadott listát vízszintes menüvé átváltoztatni. Valahogy így!

Természetesen ahhoz, hogy ez az új rész a tartalom mellé (nem pedig alá, amit a HTML kód eredményezne) kerüljön, az egyes részek stílusát be kell állítanunk.

A kezdeti beállítások nem szorulnak különösebb magyarázatra. A width:100%; tulajdonsággal a menü szélessége az oldal szélességével lesz egyenlő.

#vmenu {
width: 100%;
}

#vmenu ul {
margin:0;
padding:2px;
list-style-type:none;
border-bottom:1px dotted black;
text-align:left;
}

A lényeg a listaelemek beállításaiban található:

#vmenu li {
display:inline;
border-left:1px solid black;
padding:0 5px;
}

Annak érdekében, hogy a listaelemek ne egymás alatt, hanem egymás mellett jelenjenek meg, alkalmaztuk a display:inline; beállítást. Az elemek közötti vonalkákat a border-left:1px solid black; utasítás hozza létre, távolságukról a padding:0 5px; gondoskodik.

A linkek tulajdonságai semmi különösebb újdonságot nem tartalmaznak:

#vmenu a {
color:#46656a;
text-decoration:none;
padding:1px;
font:bold 12px arial,sans-serif;
}

#vmenu a:hover {
background-color:#F4F6F4;
text-decoration:underline;
}

Hogy az első elem előtt ne jelenjen meg a vonalka - ismét csak az IE miatt -, egy kis trükkre lesz szükségünk:

#vmenu li.elso {
border:none;
}

A HTML kódot csak egyetlen ponton kell megváltoztatnunk:

<div id="menu">
  <ul>
    <li class="elso"><a href="#">Rólunk</a></li>
    <li><a href="#">Termékek</a></li>
    <li><a href="#">Szolgáltatások</a></li>
    <li><a href="#">Kapcsolat</a></li>
  </ul>
</div>

Feladatok

5.1. feladat