Témakörök: CSS menü készítése, webdesign, weblapkészítés, honlapkészítés, Dreamweaver, weblapkészítı tanfolyam, honlap késztés oktatás, honlapkészítı képzés, felnıttképzés
Egyszerő vízszintes navigáció készítése CSS segítségével
Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére.
A menüt lista elembı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! www.netlogi-c.net
Ingyenes tippek, tanulmányok az informatika világából! Netlogi C School hírlevél http://www.netlogi-c.net/netlogic_hirlevel.htm
© Netlogi C School, 2010 Gyakorlat orientált informatika oktatás rugalmas idıbeosztással! www.netlogi-c.net
1
Témakörök: CSS menü készítése, webdesign, weblapkészítés, honlapkészítés, Dreamweaver, weblapkészítı tanfolyam, honlap késztés oktatás, honlapkészítı képzés, felnıttképzés
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:
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 { background-color: #CCC; /*Navigációs rész háttérszíne*/ } 4. A következı utasítással a függıleges listát alakítjuk át vízszintessé és eltávolítjuk a lista felsorolás jeleit. #menu li { display: inline;/*A lista sorok egy sorban jelennek meg, az utasítás hatására*/ © Netlogi C School, 2010 Gyakorlat orientált informatika oktatás rugalmas idıbeosztással! www.netlogi-c.net
2
Témakörök: CSS menü készítése, webdesign, weblapkészítés, honlapkészítés, Dreamweaver, weblapkészítı tanfolyam, honlap késztés oktatás, honlapkészítı képzés, felnıttképzés
list-style-type: none;/*Felsorolásjelek eltávolítása*/ } A beállítások csak a „menu” div ben fognak érvényesülni ezzel a kijelölı választással. 5. Mivel a lista elemek így túl közel vannak egymáshoz, ezért el kell távolítanunk egymástól az elemeket, ezt az li tag-hez rendelt margóval oldom meg. A #menu li { ……. ……. margin-right: 20px;/*Jobb oldalra margó a listaelemek közé*/ 6. Középre igazítjuk a listát, az ul tag beállításával. #menu ul { text-align: center;/*Lista középre igazítása*/ } 7. 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ípus is ) #menu a { © Netlogi C School, 2010 Gyakorlat orientált informatika oktatás rugalmas idıbeosztással! www.netlogi-c.net
3
Témakörök: CSS menü készítése, webdesign, weblapkészítés, honlapkészítés, Dreamweaver, weblapkészítı tanfolyam, honlap késztés oktatás, honlapkészítı képzés, felnıttképzés
color: #FFF;/*A linkek színének beállítása*/ border: 1px solid #FFF;/*Keret a link körül*/ padding: 10px;/*A keret eltávolítása a linktıl*/ font-family: Arial;/*A link betőtípusának a beállítása*/ text-decoration: none; /*Aláhúzás eltávolítása*/
} 8. Mivel a „menu” div széle nagyon közel van a linkek keretéhez a sávot megnövelve esztétikusabb látvány érhetı el, ezt az eredményt a „menu” div-hez rendelt belsı margóval érem el. #menu { background-color: #CCC; /*Háttérszín*/ padding-top: 5px;/*Felsı belsı-margó*/ padding-bottom: 5px;/*Alsó belsı-margó*/ } 9. Az a:hover ál-osztálykijelölı segítségével beállítjuk, hogy a nemü reagáljon az egérmutatóra. A hover állapot az egérmutató a link felett állapot beáálításakor következik be. Megváltoztatjuk a betük szinét és a háttérszínt. #menu a:hover { © Netlogi C School, 2010 Gyakorlat orientált informatika oktatás rugalmas idıbeosztással! www.netlogi-c.net
4
Témakörök: CSS menü készítése, webdesign, weblapkészítés, honlapkészítés, Dreamweaver, weblapkészítı tanfolyam, honlap késztés oktatás, honlapkészítı képzés, felnıttképzés
color: #FFF;/*Betőszín*/ background-color: #000;/*Háttérszín*/ } 10.
A navigációs rész ezzel lényegében elkészült,
természetesen a csinosítást lehet folytatni.
A Webdesigner mester képzés keretein belül részletesen megtanuljuk, hogyan készíthetünk egyszerő, vagy akár nagyon látványos menüket.
Katitntson ide a képzés megismeréséhez! Webdesigner mester képzés http://www.netlogi-c.net/webdesigner_tanfolyam.htm
Jó tanulást, fejlıdést kíván Önnek, a Netlogi C School csapata www.netlogi-c.net
© Netlogi C School, 2010 Gyakorlat orientált informatika oktatás rugalmas idıbeosztással! www.netlogi-c.net
5
