Penia.
Java menü Biliyorsunuz DHTML - Dinamik HTML demektir. Dinamik HTML ise kısaca Javascript+HTML bir arada anlamına gelir.
Şimdi gelelim DHTML menümüzün tarifine. Hadi bakalım mouselarınızı hazırlayın artık:
1) Önce aşağıdaki kodu "Tümünü Seç" yapıp web sayfanızın <HEAD> </HEAD> etiketlerinin arasına yerleştirin.
Kod
*********
.menulines{
border:2.5px solid #F0F0F0;
}
.menulines a{
text-decoration:none;
color:black;
}
</style>
<script language="JavaScript1.2">
//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com
function over_effect(e,state){
if (********.all)
source4=event.srcElement
else if (********.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=********.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}
</script>
*********
.menulines{
border:2.5px solid #F0F0F0;
}
.menulines a{
text-decoration:none;
color:black;
}
</style>
<script language="JavaScript1.2">
//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com
function over_effect(e,state){
if (********.all)
source4=event.srcElement
else if (********.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=********.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}
</script> 2) Hemen aşağıdaki kodu ise <BODY> etiketinin içinde, menunüzün olması gereken yere yerleştirin.
Kod
<table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0"> <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>ANA MENÜ</b></font></td></tr> <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="../../oto/index.htm">OtoList.com</a></font></td></tr> <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.testleronline.com.com">TestlerOnline</a> </font></td></tr> <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.interturknet.com">İnterturknet.com</a> </font></td></tr> <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.ahenkdergisi.com">Ahenk Dergisi</a></font></td></tr> <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="../../ilkturkorg/">İlkturk.org</a> </font></td></tr> </table>
Menünün İnce Ayarları için yapmanız gereken
Önce onMouse...kodunu bizzat <table> etiketinin içine aşağıdaki gibi yerleştirin:
<table onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">
İkinci olarak ise efekti yerleştirmek istediğiniz bütün TABLE hücrelerine (<TD>) class=.... kodunu yerleştirmelisiniz, aynen aşağıdaki gibi:
<td class="menulines">.......</a>
İşte Menünüz (Linkleri değiştirmeyi unutmayın)
Normal
