|
Az első leírást egy egyszerű, mégis mutatós vízszintes menüstílus kapja, vagyis ez:
Leírás
Kezdetnek megjegyezném, hogy az ilyen stílusú menük leginkább középre helyezve mutatnak jó, szóval célszerű a szöveget középre állítani.
A menü első részeként hozd létre a menüpontokat (amennyit csak szeretnél), majd linkeld be. Ezután kell nekik valami class-t adni, ami most "vmenu", de ez igazából lehet bármi. A fenti demó kódja ez:
|
<a href="#" class="vmenu">Menüpont</a>
<a href="#" class="vmenu">Menüpont</a>
<a href="#" class="vmenu">Menüpont</a>
<a href="#" class="vmenu">Menüpont</a>
|
Ezt forráskód nézetben kell beilleszteni a neki szánt helyre. A link url-jét a # helyére illeszd be, majd mentsd el. Először csak 5 egyszerű link lesz egymás mellett, de ez csak azért van, mert a hozzá kellő CSS kódot még nem illesztettük be.
Ha még nincs CSS az oldaladon, akkor hozz létre egy egyszerű modult jobb / bal oldalra, és oda, ha már van, akkor pedig ode illeszd be a kódot forráskód nézetben:
|
<style type="text/css">
a.vmenu { /* A menü linkjei alaphelyzetben */
color: #000000; /* Betűszín */
text-shadow: 1px 1px 0px #a9a9a9; /* Betűk mögötti árnyék - ha nem szeretnéd, akkor írd át az értéket erre: none */
font-weight: normal; /* Betűk vastagsága - normal (alap) vagy bold (vastag) */
font-size: 15px; /* Betűméret */
line-height: 20px; /* Sormagasság */
text-decoration: none; /* Aláhúzás - none (nincs) vagy underline (aláhúzás) */
background: transparent; /* Linkek háttere - most átlátszó */
padding-top: 10px; /* A háttér felső szélének távolsága */
padding-bottom: 10px; /* A háttér alsó szélének távolsága */
padding-left: 10px; /* A háttér bal szélének távolsága */
padding-right: 10px; /* A háttér jobb szélének távolsága */
margin-left: 16px; /* A linkek távolsága - bal oldal */
margin-right: 16px;} /* A linkek távolsága - jobb oldal */
a.vmenu:hover { /* A menü linkjei, ha ráviszed az egeret */
color: #ffffff; /* Betűszín */
text-shadow: 1px 1px 0px #a9a9a9; /* Betűk mögötti árnyék - ha nem szeretnéd, akkor írd át az értéket erre: none */
background: #bdbdbd; /* Linkek háttere - ha nem szeretnéd, hogy legyen: transparent */
text-decoration: none;} /* Aláhúzás - none (nincs) vagy underline (aláhúzás) */
</style>
|
Ha minden igaz, akkor a kód minden eleme mellett van magyarázat. Amit még hozzátennék a CSS kódhoz, hogy egyrészt eléggé "időigényes" az állítgatása, de mégis célszerű a felső és alsó távolságokat akkorára állítani, amekkora a menünek szánt részben jól mutat. Viszont azt még hozzátenném, hogy körülbelül egyforma értéknek kell lennie az összes padding-nak, hogy jól is mutasson. A kétoldali margin is legyen körülbelül ugyanakkora, mert így lesz pont középen.
A többit a fantáziátokra bízom. :)
Ha valami nem érthető, esetleg nem megy, mindenképp jelezd a Kapcsolat modulban, vagy írj e-mailt a [email protected] címre!
Saját írás! Más oldalon főszerkesztői beleegyezés nélkül megjeleníteni tilos! |
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
