Aşağıya doğru açılan menü örnekleri

11-06-2007 08:56 AM

Bu örneklerde tıkladığınız zaman aşağıya doğru açılan bir arama motoru ve pencere vardır.

Kod:

<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>&nbsp; </b><br />

<DIV id="subcontent" style="position:absolute; border: 1px solid orange; background-color: #E1DD93; width: 300px; padding: 8px; display:none">

<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="" 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:00​00FF;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"><b>

<a href="search.htm" onClick="return overlay(this, 'subcontent2', 'rightbottom')">Tıklayın</a></b></p>

<p style="padding-left: 800px">

<p style="padding-left: 800px"><br /></p>

<DIV id="subcontent2" style="position:absolute; display:none; border: 1px solid gray; background-color: #E1DD93; width: 400px; height: 400px; padding: 8px">

İlgili metni , resmi vb. bilgileri buraya yerleştirebilirsiniz<p><a href="mailto:ksabitk@hotmail.com">

ksabitk@hotmail.com</a> <br>

<p><a href="http://www.saab.tr.cc">www.saab.tr.cc</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>

Kodları Kendinize Göre Düzenleyerek Kullanınız.

Normal Mod \| Çizgisel Mod Aşağıya doğru açılan menü örnekleri
Yazar	Mesaj