portaldesigns
portaldesigns
Üdvözöllek!
Itt rengeteg dolgot megtalálsz, amit felhasználhatsz oldalad díszítésére, egyedibbé és szebbé tételére. Nézz körbe, és találd meg, ami neked kell. Válogass kedvedre a számos ingyen elvihető design, tutorial és letöltés között!
 
Kiemelt tartalom
 
Hírek
Friss bejegyzések
2013.08.14. 18:52
2013.08.12. 22:22
2013.07.31. 18:41
Friss hozzászólások
 
Vízszintes menü - #1
Portálépítés / Menüstílusok / Vízszintes menü #1

Az első leírást egy egyszerű, mégis mutatós vízszintes menüstílus kapja, vagyis ez:

Menüpont Menüpont Menüpont Menüpont

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 portaldesigns@gportal.hu címre!

Saját írás! Más oldalon főszerkesztői beleegyezés nélkül megjeleníteni tilos!

 
Belépés Regisztráció Kapcsolat Facebook Oldalinfó

A Múzsa, egy gruppi élményei a színfalak mögött :)    *****    Madarak és fák napjára új mesével vár a Mesetár! Nézz be hozzánk!    *****    Rosta Iván diplomás asztrológus vagyok! Szívesen elkészítem a horoszkópodat, fordúlj hozzám bizalommal. Várom a hívásod!    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, lakások, egyéb épületek szigetelését kedvezõ áron! Hívjon! 0630/583-3168    *****    Ha te is könyvkiadásban gondolkodsz, ajánlom figyelmedbe az postomat, amiben minden összegyûjtött információt megírtam.    *****    Nyereményjáték! Nyerd meg az éjszakai arckrémet! További információkért és játék szabályért kattints! Nyereményjáték!    *****    A legfrissebb hírek Super Mario világából, plusz információk, tippek-trükkök, végigjátszások!    *****    Ha hagyod, hogy magával ragadjon a Mario Golf miliõje, akkor egy egyedi és életre szóló játékélménnyel leszel gazdagabb!    *****    A horoszkóp a lélek tükre, nagyon fontos idõnként megtudni, mit rejteget. Keress meg és nézzünk bele együtt. Várlak!    *****    Dryvit, hõszigetelés! Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati szigetelését!    *****    rose-harbor.hungarianforum.com - rose-harbor.hungarianforum.com - rose-harbor.hungarianforum.com    *****    Vérfarkasok, boszorkányok, alakváltók, démonok, bukott angyalok és emberek. A világ oly' színes, de vajon békés is?    *****    Az emberek vakok, kiváltképp akkor, ha olyasmivel találkoznak, amit kényelmesebb nem észrevenni... - HUNGARIANFORUM    *****    Valahol Delaware államban létezik egy város, ahol a természetfeletti lények otthonra lelhetnek... Közéjük tartozol?    *****    Minden mágia megköveteli a maga árát... Ez az ár pedig néha túlságosan is nagy, hogy megfizessük - FRPG    *****    Why do all the monsters come out at night? - FRPG - Why do all the monsters come out at night? - FRPG - Aktív közösség    *****    Az oldal egy évvel ezelõtt költözött új otthonába, azóta pedig az élet csak pörög és pörög! - AKTÍV FÓRUMOS SZEREPJÁTÉK    *****    Vajon milyen lehet egy rejtélyekkel teli kisváros polgármesterének lenni? És mi történik, ha a bizalmasod árul el?    *****    A szörnyek miért csak éjjel bújnak elõ? Az ártatlan külsõ mögött is lapulhat valami rémes? - fórumos szerepjáték    *****    Ünnepeld a magyar költészet napját a Mesetárban! Boldog születésnapot, magyar vers!