Mozg�/v�ltoz� men�pontok (Navigation Bar, r�viden NavBar)

�gy fog kin�zni:

• Kezd�lap
  
• Le�r�sok
  
• CSS k�dok
  
• Flash banner
  
• Vend�gk�nyv
  
• T�rsoldalaim

A fenti p�ld�ban egy v�zszintes men�sort l�ttok, de term�szetesen f�gg�legeset is lehet k�sz�teni.

El�sz�r k�sz�ts egy egyszer� modult. Ha v�zszintes NavBart szeretn�l, k�z�pre �ll�tsd, ha f�gg�legeset, akkor bal/jobb oldalra! Ebbe a modulba �rj egy felsorol�st, ahova a men�id nev�t �rod, �s tegy�l mindegyikre linket (ilyet keress szerkeszt� n�zetben: ), hogy ha r�kattintanak, a megfelel� men�pontot l�ss�k. Amikor a linkel�sn�l tartasz, kattints a "Tov�bbi opci�k" f�lre �s ott �rj egy c bet�t a St�lusk�szlethez (l�sd k�p).

Ezut�n d�ntsd el, milyen sz�n� legyen a bet�, �s a h�tt�r (alap�llapot �s ha r�viszik az egeret) �s keresd ki ezeknek a sz�nk�dj�t.

A lenti p�ld�ban megjel�lt helyekre m�sold be a sz�nk�dokat (v�zszintes Navbar: megadhatod, hogy a fejl�cen hol legyen a men�, �ltal�ban az alj�ra szokt�k tenni), majd kim�solod az eg�szet �s k�dn�zetben beteszed az �sszes sz�veg tetej�re (seg�ts�g: k�d beilleszt�se)

F�gg�leges NavBar k�dja:

<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link.c,a:visited.c
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#990000;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover.c,a:active.c
{
background-color:#FF9933;
}
</style>

Amin v�ltoztathatsz:

• color: bet�sz�n
  
• background-color: az els� a h�tt�rsz�n alapb�l, a m�sodik, ha r�viszed az egeret
  
• width: egy men�pont/gomb sz�less�ge
  

K�rem a k�dot!

V�zszintes NavBar k�dja:

<style type="text/css">
<div style="width:950px ; height:50px; left:10px; top:200px">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link.c,a:visited.c
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#990000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover.c,a:active.c
{
background-color:#FF9933;
}
</div>
</style>

Amin v�ltoztathatsz:

• width: az els� az �szes men�pont sz�less�ge, a m�sodik egy men�pont/gomb sz�less�ge
  
• height: magass�g
  
• left: t�vols�g balr�l
  
• top: t�vols�g fentr�l
  
• color: bet�sz�n
  
• background-color: az els� a h�tt�rsz�n alapb�l, a m�sodik, ha r�viszed az egeret

K�rem a k�dot!

<< vissza a le�r�sokhoz!