Öncelikle 4 satır ve 1 sütundan oluşan aşağıdaki koddaki gibi bir tablo oluşturalım. (Renkler be border üzellikleri sizin hayal gücünüze kalmış ;)
CODE:
<html>
<head>
<title>menü</title>
</head>
<body>
<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr><td bgcolor="#CCCCCC" >Ana Sayfa</td></tr>
<tr><td bgcolor="#CCCCCC" >Resimlerim</td></tr>
<tr><td bgcolor="#CCCCCC" >Favorilerim</td></tr>
<tr><td bgcolor="#CCCCCC" >Hakkımda</td></tr>
</table>
</body>
</html>
Şimdi oluşturduğumuz tabloyu ufak eklentilerle şık bir menü halne getireceğiz. Kullanacağımız
kodlar ufak fakat büyük ölçüde görsel zenginlik katıyor
<b>Eklenecek kodlar</b>
this.style.background='#CCCCCC' // bu kod nesnelerin(tablo,satır,sütun gibi) onmouseover,onmouseout,onclick,vb.. olaylarına yazır ve eklenen nesnenin arka plan rengini belirtilen renge ve olaya göre değiştirir.
parent.location='index.php' // nesnenin onclick olayına eklendiğinde o nesneye mouse ile clicklendiği zaman tırnaklar arasındaki sayfa ile köprü(link) kurar.
this.style.cursor = 'hand' //nesnenein onmouseover olayına eklendiğinde imlecimizi o nesnenin üzerine getirdiğimiz zaman imlecimizin şeklini <b>"el"</b> şekline getirir. Şimdide bu kodların nasıl eklendiğini bakalım.
CODE:
<html>
<head>
<title>Menü</title>
</head>
<body>
<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#CCCCCC" onMouseOut="this.style.background='#CCCCCC'"
onClick="parent.location='index.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Ana Sayfa</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" onMouseOut="this.style.background='#CCCCCC'"
onClick="parent.location='images.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Resimlerim</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" onMouseOut="this.style.background='#CCCCCC'"
onClick="parent.location='favorite.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Favorilerim</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" onMouseOut="this.style.background='#CCCCCC'"
onClick="parent.location='hakkimda.php'" onMouseOver="this.style.background ='#E8E8E8';
this.style.cursor = 'hand'">Hakkımda</td>
</tr>
</table>
</body>
</html>
Yukarıda ki kodda bu kodlarımız "td" tagımızın olaylarını ekledik tablomuz tek sütündan oluştuğu için "td" dağına eklememiz yeterli oldu. Tablomuz iki sütundan oluşmuş olsaydı kodlarımız "tr" tagına elememiz daha mantıklı olururdu.
Böylece basit bir html menü hazırlamış olduk. Bu menüyü 2 sütun halinde yapıp ilk satıra ufak imler koyarak dah şık bir hale getirebiliriz.
Dia
okanatabag@gmail.com
14 Nisan 2005 16:26
Takip Et
Paylaş