<html>
<head>
<script type="text/javascript">
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Aşağya doğru açılan menü örnekleri</title>
</head>
<body>
<b><a href="search.htm" onClick="return overlay(this, 'subcontent')">Arama Motoru</a> </b><p> </p>
<p> </p>
<p> </p>
<p align="right"><b>
<a href="search.htm" onClick="return overlay(this, 'subcontent2', 'rightbottom')">Tıklayın</a> </b><br />
</p>
<DIV id="subcontent" style="position:absolute; border: 1px solid orange; background-color: #E1DD93; width: 300px; padding: 8px; display:none; left:12px; top:37px">
<p><b>Google Arama</b></p>
<!-- Search Google -->
<center>
<form method="get" action="http://www.tr.cc/asp/arama.html" target="_top">
<table bgcolor="#E1DD93">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<label for="sbi" style="display: none">Arama terimlerinizi girin</label>
<input type="text" name="q" size="31" maxlength="255" value="host" id="sbi"></input>
<label for="sbb" style="display: none">Arama formu gönder</label>
<input type="submit" name="sa" value="Ara" id="sbb"></input>
<input type="reset" value=" Sil ">
<input type="hidden" name="client" value="pub-1744912431168977"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-9"></input>
<input type="hidden" name="oe" value="ISO-8859-9"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:11"></input>
<input type="hidden" name="hl" value="tr"></input>
</td></tr></table>
</form>
</center>
<!-- Search Google -->
<div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">
<span style="text-decoration: none">
<font color="#FF0000"><b>Kapat</b></font></span></a></div>
</DIV>
<p style="padding-left: 800px" align="left"><br /></p>
<DIV id="subcontent2" style="position:absolute; display:none; border: 1px solid gray; background-color: #E1DD93; width: 400px; height: 400px; padding: 8px; left:370px; top:186px">
İlgili metni , resmi vb. bilgileri buraya yerleştirebilirsiniz<p><a href="mailto:ksabitk( at )hotmail.com">
ksabitk( at )hotmail.com</a> <br>
<p><a href="http://www.saab.tr.cx">
www.saab.tr.cx</a></p> <div align="right"><a href="#" onClick="overlayclose('subcontent2'); return false">
<span style="text-decoration: none">
<font color="#FF0000"><b>Kapat</b></font></span></a></div>
</DIV>
</body>
</html>
Konu: Aşağı Doğru Açılan Menü 
