AR Design - G-Portál

Haladóknak

Haladóknak : Dinamikus menü készítése

Dinamikus menü készítése

Az aktuális CSS kódunk hatással lehet a demóra, így nem biztos, hogy azt látod, amit kellene. Ezen ne lepődj meg, inkább próbáld ki a kódot a lapodon, hisz már a szövegszerkesztőben láthatod az eredményt! :)

A kódot egy olasz oldalon találtam meg, nem mintha tudnék olaszul :D csak véletlen beleakadtam miközben minismileyk után kutattam. A címet is az olasz oldal után adtam.

Tehát a dinamikus menü (vidd rá az egeret)

#Navigation#

Menüpont

Menüpont

Menüpont

Rengeteg trükkel egyedivé varázsolhatod az ilyen menüdet! Ezeket a kód alatt a magyarázatban leírjuk!

Kód:

<TABLE height=1 cellSpacing=1 cellPadding=0 width=150 bgColor=#66ccff border=0>
<TBODY>
<TR>
<TD vAlign=center align=left width=150 bgColor=#42518c height=8>
#Navigation# </TD></TR>
<TR>
<TD onmouseover="bgColor='#3399ff'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#3399FF'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#3399FF'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR></TBODY></TABLE>

Először is a kódot egyszerű modulba kell tenni (<>). A kód beillesztése után, ha nem kívánod formázni, vagy már formáztad, térj vissza szerkesztői nézetbe, ahol átírhatod a menüpontokat, sőt akár itt formázhatod a betűket a szokásos módon!
Ha több menüpontra vágysz, akkor a kódban ezt a részt kell újra bemásolni:

<TD onmouseover="bgColor='#3399FF'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>

Arra figyelj oda, hogy ne a kód lezárása után másold, tehát ne ott, ahol a sok </valami> van, hanem egy ugyanilyen kódrészlet után!

Kód 1. része (vastag betűs):
<TABLE height=1 cellSpacing=1 cellPadding=0 width=150 bgColor=#66ccff border=0>
<TBODY>
<TR>

Magyarázat:
width: a menü szélessége, jelenleg 150
bgColor: a menüpontok hátterének színe
border: keret, ha 0 akkor nincs, ha akarsz keretet írj oda egy számot
ha a keretnek színt akarsz adni, akkor a border után írd: bordercolor=színkód, pl.
border=1 bordercolor=#ffffff

Kód 2. része (dőlt betűs):
<TD vAlign=center align=left width=150 bgColor=#42518c height=8>
#Navigation# </TD></TR>
<TR>

Magyarázat:
align: igazítás, nem kell ezzel foglalkozni, hisz szerkesztőben odaigazítasz mindent ahová akarsz.
width: szélesség (ugyanazt add meg, amit fentebb)
bgColor: menü háttér színe (Navigation)
height: magasság
FONT face: betűtípus
color: betű színe
size: méret
#Navigation#: ez a menüd neve most, átírhatod a kódban, de a szerkesztődben is, a formázásra is ez érvényes, szerkesztőben is elegendő formázni (szín, méret stb.)

Kód 3.része(normál betű):
<TD onmouseover="bgColor='#3399FF'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>

Magyarázat:
Ez a rész felelős a menüpontok kinézetéért,természetesen a betűk formázását itt sem muszáj a kódban elvégezned, de magát a menüpontok hátterét igen:
onmouseover="bgColor='#3399FF'" -> amikor ráviszed az egeret a linkre, ilyen színű lesz a háttere
onmouseout="bgColor='#66ccff'" -> ha ráviszed az egeret a linkre, majd elveszed, ilyen színű marad a menüpont háttere, bgColor=#66ccff -> a menüpontod háttér színe, ha azt akarod, hogy ez állandó legyen, akkor az onmouseout="bgColor='#66ccff'" színkódhoz is ugyanazt a színkódot írd, mint nálunk a fent látható dinamikus menü demó.
A kód ezen részében is megtalálható a szélesség: width, magasság: height, s a kódban itt:
href="http://www.hd.vilaga.hu">Menüpont
rakhatsz linket a menüpontra, ha átírod honlapunk címét, megváltoztathatod a betűtípust (Verdana), betű színét (solor), méretét (size), nevét (Menüpont).
De ahogy már említettük ezt nem muszáj a kódban átírnod, GP szerkesztőjében is át tudod írni!

Íme egy példa arra, ha 3 különböző színt állítasz be menüpont hátterének (vidd rá az egeret):

::Navigation::

Menüpont

Menüpont

Menüpont

Ha megtetszett, tessék a kódja:
<TABLE borderColor=#ffffff height=1 cellSpacing=1 cellPadding=0 width=150
bgColor=#66ccff border=1>
<TBODY>
<TR>
<TD vAlign=center align=left width=150 bgColor=#42518c height=8>
::Navigation:: </TD></TR>
<TR>
<TD onmouseover="bgColor='#fbb191'" onmouseout="bgColor='#ffffff'" vAlign=center
align=left width=150 bgColor=#000000 height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#fbb191'" onmouseout="bgColor='#ffffff'" vAlign=center
align=left width=150 bgColor=#000000 height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#fbb191'" onmouseout="bgColor='#ffffff'" vAlign=center
align=left width=150 bgColor=#000000 height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR></TBODY></TABLE>

S itt egy másik példa, arra, hogy ha minden második menüpontnak különböző háttereket állítasz be:

::Navigation::

Menüpont

Menüpont

Menüpont

Ennek kódja, ha érdekel:

<TABLE borderColor=#ffffff height=1 cellSpacing=1 cellPadding=0 width=150
bgColor=#66ccff border=1>
<TBODY>
<TR>
<TD vAlign=center align=left width=150 bgColor=#42518c height=8>
::Navigation:: </TD></TR>
<TR>
<TD onmouseover="bgColor='#fbb191'" onmouseout="bgColor='#ffffff'" vAlign=center
align=left width=150 bgColor=#000000 height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#fbb191'" onmouseout="bgColor='#000000'" vAlign=center
align=left width=150 bgColor=#ffffff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#fbb191'" onmouseout="bgColor='#ffffff'" vAlign=center
align=left width=150 bgColor=#000000 height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR></TBODY></TABLE>

S itt az első demó kerettel:

::Navigation::

Menüpont

Menüpont

Menüpont

Ennek a demónak a kódja:

<TABLE height=1 cellSpacing=1 cellPadding=0 width=150 bgColor=#66ccff border=2 bordercolor=425182>
<TBODY>
<TR>
<TD vAlign=center align=left width=150 bgColor=#42518c height=8>
::Navigation:: </TD></TR>
<TR>
<TD onmouseover="bgColor='#3399ff'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#3399FF'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR>
<TR>
<TD onmouseover="bgColor='#3399FF'" onmouseout="bgColor='#66ccff'" vAlign=center
align=left width=150 bgColor=#66ccff height=1>
<A href="http://www.hd.vilaga.hu">Menüpont</A></TD></TR></TBODY></TABLE>

Láthatod sok lehetőséged van, csak variálgatni kell a színeket
Ha alkottál valami jót, s szeretnéd, hogy kirakjuk az oldalra, akkor küldd el nekünk emailbe, vagy rakd be Ötletadóba :)

Saját írás-ne merd ellopni

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! ***** Amikor nem tudod mit tegyél és tanácstalan vagy akkor segít az asztrológia. Fordúlj hozzám, segítek. Csak kattints! ***** Részletes személyiség és sors analízis + 3 éves elõrejelzés, majd idõkorlát nélkül felteheted a kérdéseidet. Nézz be!!!! ***** A horoszkóp a lélek tükre, egyszer mindenkinek érdemes belenéznie. Ez csak intelligencia kérdése. Tedd meg Te is. Várlak