Az alábbi cikkben függőleges menü késztésére egy
egyszerű módszert fogunk bemutatni.
A menüt a lista elemeiből fogjuk elkészíteni.
- először létrehozunk egy listát, és egy div-be tesszük, a div nevének pedig a „menu” ID-t fogom adni:
<div>
<ul>
<li>menüpont 1</li>
<li>menüpont 2</li>
<li>menüpont 3</li>
</ul>
</div>
- A lista elemekből link-et csinálunk.
- A következő lépésben az első CSS kódot hozzuk létre
#menu {
width: 200px;
}
#menu a {
display: block;
}
Az első utasítás hatására a menu div szélességére 200pixelt adtunk meg, ezáltal a div nem tölti ki az összes rendelkezésre álló területet.
A második utasítás hatására az egérmutató már nem csak a link szövegen változik át, hanem a teljes sor érzékeny területté válik.
A #menu a kijelölő minden a menu-ben lévő a tag-re vonatkozó beállítás, ezért a változás a teljes div ben érvényesülni fog.
- Kidekoráljuk a menünket: ( a beállítások csak szemléltetés kedvéért ezek, az oldal egyéb beállításainak megfelelően válasszunk színeket és betűtípust is )
#menu a {
display: block;
background-color: #0CF; /*Háttérszín*/
width: 120px;
text-decoration: none; /*Aláhúzás eltávolítása*/
margin-top: 12px; /*Felső belső margóval eltávolítjuk egymástól a menüpontokat*/
color: #000; /*A betűk szine*/
border: 1px solid #06F; /*Vékony keret a hivatkozás körül*/
}
- Eltávolítjuk a lista elem felsorolás jelét:
#menu ul {
list-style-type: none;
}
#menu a:hover {
color: #666;
background-color: #CCC;
}
- A navigációs rész ezzel kész
padding: 3px; /*Hivatkozás körül belső margó*/
A Webdesigner mester képzés keretein belül a Dreamweaver modulban egyébként igen részletesen tanuljuk a CSS stíluslapok jellemzőit, illetve gyakorlati alkalmazásukat.
Kattitntson ide a képzés megismeréséhez!
Webdesigner mester képzés-gyakorlat orientált weblapkészítő tanfolyam!
Ingyenes informatika tippek, tanulmányok az Informatika Hírlevelünkben!
Iratkozzon fel rá itt!
Ingyenes informatika hírlevél
Szép napot, jó tanulást kván,
Eilinger Ákos
mérnök-informatikus