acilir-menu.jpg

Vereceğim javascript kodu ile taşınabilir kutu biçiminde menü yapabileceksiniz.Yukarıda resmini gördüğünüz menüyü yapmak için lütfen yazının devamında yer alan kodları uygulayın. Ama önce test etmek isterseniz buradan test edebilirsiniz.Ayrıca aşağıda vereceğim kodlara altarnetif olarak açılan test sayfasını farklı kaydederek  görünüm oradan da kaynak yazan yere tıklayarak kaynak kodlarına ulaşabilirsiniz ve istediğiniz değişikliği yapıp kaydedince sayfayı yenile diyerek değişiklikleri görebilirsiniz.

HEAD…HEAD arasına eklenecek kod

<font color="#ff6600">&lt;!-- Original:  ScriptBreaker --&gt;
&lt;!-- Web Site:  http://www.ScriptBreaker.com --&gt;
&lt;style&gt;
.move
{
width:100%;
background-color:#3E5999;
border-bottom:1px solid black;
font-size:14px;
font-family:verdana;
font-color:"#C9D2DC";
text-align:center;
}
.info
{
width:100%;
background-color:#3E5999;
border-top:1px solid black;
font-size:13px;
font-family:verdana;
font-color:"#FFFFFF";
color:"FFFFFF";
}
.panel
{
width:150;
position:absolute;
border:1px solid black;
left:350;
top:200;
font-size:13px;
font-family:verdana;
}
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}
#panel a.visited{
text-decoration:none;
}
.menu
{
width:100%;
background-color:#96C5AA;
font-size:13px;
font-family:verdana;
}
.bilgi {font-family:arial black, arial;font-size:17px; color:gold; font-weight:bold;}
&lt;/style&gt;
 
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
N = (document.all) ? 0 : 1;
var ob;
var over = false;
 
function MD(e) {
if (over)
{
if (N) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}
 
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
 
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
&lt;/script&gt;</font>

 <BODY>..</BODY> arasına eklenecek kod

<font color="#ff6600">&lt;div id="panel"  class="panel" &gt;
 
&lt;script language="JavaScript"&gt;
 
function getArray(id)
 
{
 
var splitarray = link[id].split("|");
 
return splitarray;
 
}
 
 
 
function info(i,obj,col)
 
{
 
 
 
sublink = getArray(i);
 
infobar = document.getElementById("infob");
 
infobar.innerHTML = "&lt;font class='bilgi'&gt;&lt;i&gt;!&lt;/i&gt;&lt;/font&gt;   "+sublink[2];
 
obj.style.backgroundColor=col;
 
}
 
 
 
function endi(obj,col)
 
{
 
obj.style.backgroundColor=col;
 
infobar = document.getElementById("infob");
 
infobar.innerHTML = "&lt;font class='bilgi'&gt;&lt;i&gt;!&lt;/i&gt;&lt;/font&gt;  Açıklamasını görmek için bir öğe seçin.&lt;br&gt;";
 
}
 
 
 
var link = new Array();
 
link[0] = " » extradestek.org|http://www.extradestek.org |Destek sitesi";
 
link[1] = " » hediyeler.org|http://www.hediyeler.org|Hediyelerini kendin yap";
 
link[2] = " » Wordpress temaları|http://www.themes-wordpress.org |Türkçe tema arşivi";
 
link[3] = " » epardus.com|http://www.epardus.com |Özgür yazılım pardus destek sitesi";
 
link[4] = " » ilksayfa.org|http://www.ilksayfa.org|Genel sağlık bilgileri";
 
 
 
document.write("&lt;div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'&gt;&lt;font color=#C9D2DC&gt;&lt;b&gt;:: M e n ü ::&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div class='menu'&gt;&lt;br&gt;&lt;/div&gt;");
 
for(i=0;i&lt;link.length;i++)
 
{
 
sublink = getArray(i);
 
document.write("&lt;a href='"+sublink[1]+"'&gt;&lt;div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'#96C5AA')\" style='cursor:hand'&gt;  "+ sublink[0] +"&lt;/div&gt;&lt;/a&gt;");
 
}
 
document.write("&lt;div class='menu'&gt;&lt;br&gt;&lt;/div&gt;&lt;div class='info' id='infob' name='infob'&gt;&lt;font class='bilgi'&gt;&lt;i&gt;!&lt;/i&gt;&lt;/font&gt;  &lt;br&gt;&lt;/div&gt;");
 
&lt;/script&gt;
 
&lt;/div&gt;
&lt;!-- end Source --&gt;</font>