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! Ingyenes tippek, tanulmányok az informatika világából! Netlogi C School hírlevél http:///netlogic_hirlevel.htm 1
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: <div id="menu"> <ul> <li>menüpont 1</li> <li>menüpont 2</li> <li>menüpont 3</li> </ul> </div> 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*/ 2
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 { közé*/.. margin-right: 20px;/*Jobb oldalra margó a listaelemek 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 { 3
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 { 4
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:///webdesigner_tanfolyam.htm Jó tanulást, fejlıdést kíván Önnek, a Netlogi C School csapata 5