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.
Fogadja szeretettel ezt a minitanulmányt!
Reméljük hasznára válik majd!
Üdvözlettel,
Netlogi C School
Gyakorlat orientált informatika oktatás
rugalmas időbeosztással!
Ingyenes tippek, tanulmányok az informatika világából!
Netlogi C School hírlevél
1. 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:
menüpont 1
menüpont 2
menüpont 3
2. A lista elemekből link-et csinálunk.
3. 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.
4. 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*/
}
5. Eltávolítjuk a lista elem felsorolás jelét:
#menu ul {
list-style-type: none; }
6. Az a:hover ál-osztálykijelölő segítségével beállítjuk, hogy a menü reagáljon az egérmutatóra.
A hover állapot az egérmutató a link feletti állapot beállításakor következik be.
Megváltoztatjuk a betük szinét és a háttérszínt.
#menu a:hover {
color: #666;
background-color: #CCC; }
7. A navigációs rész ezzel kész, természetesen a csinosítást lehet folytatni, például a #menu a kiegészíthető az alábbi résszel, hogy a szövegtől távolabb helyezkedjen el, és ezáltal nagyobb helye legyen.
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.
Ingyenes informatika tippek, tanulmányok az Informatika Hírlevelünkben! Iratkozzon fel rá itt!
Jó tanulást, fejlődést kíván Önnek,
a Netlogi C School csapata
www.netlogi-c.net
Címkék: webdesign CSS stíluslapok
Megjelenés ideje: 2010-05-17 14:20:37
Beküldte: Netlogi-C School (Weinzierl Anett)