Menü készítése generátorral és CSS működése és formázási lehetőségeinek bemutatása
Ákosnak köszönhetően mai cikkünkben CSS menü generátorral készített navigációt mutatunk be, valamint ennek a személyre szabási lehetőségeit.
Az oldal, ahol a menüt elkészíttük:
http://www.cssmenumaker.com/builder/menu_info.php?menu=038
Ez egy narancssárga függőleges menü. A Customize-re kattintva létrehozhatjuk a saját menünket.
1. Step 1: Create Menu Structure:
Struktúra, vagyis a menüpontok létrehozása. Az Add Button gombra kattintva beírhatjuk a menü szővegét, címét, a hivatkozást, és azt, hogy melyik ablakban nyíljon meg.
A következőt készítettem el:
<a href="index.html" target="_self">Bemutatkozás</a>
<a href="hirek.html" target="_self">Hírek</a>
<a href="kapcsolat.html" target="_self">Kapcsolat</a>
2. A Preview Menu-re kattintva a következő lépéshez jutunk.
3. Step 2: Preview Menu Design
Kipróbálhatjuk, tovább szerkeszthetjük, vagy a Step 3 Download-ra kattintva letölthetjük az elkészült struktúrát.
4. Step 3: Download Your Menu
Download Now gombbal letölthetjük a menüt.
A zip fájlt letöltve és kicsomagolva a következőket kaptuk:
Sample: Mintaoldal, amin a menü működését kipróbálhatjuk.
installation_instruction: Leírás arról, hogy mit is kell csinálnunk.
menu (mappa): Maga a menühöz szükséges css és kép van benne.
5. Installation instruction leírása:
INSTALLATION INSTRUCTIONS
1) Upload the "Menu" folder to the root directory of your website.
( a menu mappát el kell helyeznünk a site-unkba )
2) Copy and paste the code below to the desired spot in your site.
( Másoljuk copy és paste segítségével az alábbi kódot a készülő oldalunkra )
6. A kód elemzése:
<head>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
A fenti kóddal csatoljuk a css fájlt az oldalunkhoz.
A head tag-ek jelzik, hogy ezt az oldal mely részébe kell tenni.
Természetesen a webszerkesztő által biztosított css csatolást is lehet használni, href rész ebben az esetben az aktuális helyre mutat, de ha a menu mappa máshol van, mint ami a kódban szerepel, és bemásolással oldjuk meg, akkor figyelni kell a helyes útvonalra.
A body-ba másolva a menü feltűnik az oldalon.
<div class="outer">
<div id="menu4">
<ul>
<li><a href="index.html" target="_self">Bemutatkoz�s</a></li>
<li><a href="hirek.html" target="_self">H�rek</a></li>
<li><a href="kapcsolat.html" target="_self">Kapcsolat</a></li>
</ul>
</div>
</div>
Az outer osztály tartalmazza a menu4 azonosítóju div-et.
Outer CSS beállításai:
.outer{
margin:0px;
padding:0px;
}
A margó és a padding beállításaival lehet a menü poziciót állítani, és ehhez a részhez háttérszín, illetve egyéb háttérbeállításokat megadva lehet az oldalunk külalakjához igazítani.
menu4 –hez rendelt CSS beállítások:
Tehát a működési mód a következő: A háttér kezdő pozícióját eltoljuk minden állapotban.
A módszer előnye, hogy a kép letöltődésekor minden állapot képe letöltődik, ezért a megjelenítés gyorsabb lehet, mint abban az esetben, amikor az új képet csak az állapothoz rendeljük.
Amennyiben még többet szeretne megtudni a témáról, vagy szívesen kitanulná a professzionális weblapkészítést, akkor legyen ott az augusztus közepén induló PÉCSI, vagy a augusztus végén induló BUDAPESTI Webdesign képzéseink valamelyikén!!
Induló csoportok:
- Akkreditált PHP-MYSQL Webprogramozó Mester képzés
- Web Artist képzés- Webdesign és Webprogramozó végzettség egyetlen képzés alatt!!
- Webdesigner Mester- emelt szintű weblapkészítő tanfolyam
Jelentkezési határidő augusztus 15!
Jelentkezzen itt!
Használja ki a nyarat, és szerezzen használható informatika tudást augusztusban is!
Budapest-Pécs
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
