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

Advent a Mesetárban! Téli és karácsonyi mesék és színezõk várnak! Nézzetek be hozzánk! ***** Nagyon pontos és részletes születési horoszkóp, valamint 3 év ajándék elõrejelzés, diplomás asztrológustól. Kattints!!!! ***** A horoszkóp a lélek tükre,egyszer mindenkinek érdemes belenézni.Keress meg és én segítek értelmezni a csillagok állását! ***** HAMAROSAN ÚJRA ITT A KARÁCSONY! HA SZERETNÉL KARÁCSONYI HANGULATBA KEVEREDNI, AKKOR KATT IDE: KARACSONY.GPORTAL.HU ***** Nyakunkon a Karácsony, ajándékozz születési horoszkópot barátaidnak, ismerõseidnek.Nagyon szép ajándék! Várlak, kattints ***** Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon! ***** A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom. ***** Gigágá! Márton napján is gyertek a Mesetárba! Nemcsak libát, de kacsát is kaptok! Játsszatok velünk! ***** A Nintendo a Nintendo Music-kal megint valami kiváló dolgot hozott létre! Alaposan nagyító alá vettem, az eredmény itt. ***** Leanderek, Parfümök, Olajok, és Szépségápolási termékek! Használd a LEVI10 kupont és kapj 10% kedvezményt!Megnyitottunk ***** Megjelent a Nintendo saját gyártású órája, a Nintendo Sound Clock Alarmo! Ha kíváncsi vagy, mit tud, itt olvashatsz róla ***** Megnyílt a webáruházunk! Parfümök, Szépségápolási termékek, Olajok mind egy helyen! Nyitási akciók, siess mert limitált! ***** Az általam legjobbnak vélt sportanimék listája itt olvasható. Top 10 Sportanime az Anime Odyssey-n! ***** Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be! ***** Megnyílt a webáruházunk! NYITÁSI AKCIÓK! Tusfürdõ+Fogkrém+Sampon+Izzadásgátló+multifunkcionális balzsam most csak 4.490! ***** Új mese a Mesetárban! Téged is vár, gyere bátran! ***** Veterán anime rajongók egyik kedvence a Vadmacska kommandó. Retrospektív cikket olvashatsz róla az Anime Odyssey blogban ***** Parfümök, Olajok, Párologtatók mind egy weboldalon! Siess mert nyitási AKCIÓNK nem sokáig tart! Nagy kedvezmények várnak ***** Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon! ***** Aki érdeklõdik a horoszkópja után, az nem kíváncsi, hanem intelligens. Rendeld meg most és én segítek az értelmezésben!