Javascript kodlarÄ± ile uzun ve aÃ§Ä±lÄ±r menÃ¼ yapÄ±mÄ±

Yazan: ByM

23 Tem

Yine javascript kodlarÄ± ile uzun ve aÃ§Ä±lÄ±r bir menÃ¼ yapmanÄ±za olanak saÄŸlayan kodlara burada yer vermek istiyorum.Bu sitenizde Ã¼st tarafa menÃ¼ koymanÄ±za yarayabilir.Yada buna benzer ÅŸeylerde. KodlarÄ± gÃ¶rmek iÃ§in devamÄ±nÄ± oku yazan yerden buyrun.

AyrÄ±ca Ã¶nce test etmek isterseniz buradan. Testi internet explorer ile yaparsanÄ±z sorun yaÅŸamassÄ±nÄ±z.

HEAD..HEAD arasÄ±na eklenecek kod

 
<font color="#ff6600">&lt;style&gt;
BODY { font-family:verdana, arial, helvetica; font-size:70%; }
H1 { font-size:120%; font-style:italic; }
 
DIV#divMenuBar { background-color:#6699CC; }
TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; }
TABLE#tblMenuBar TD.MenuMadde { font-weight:bold; cursor:hand; }
 
DIV.clsMenu {
font-size:90%; background-color:#6699CC;
position:absolute; visibility:hidden; width:130px;
padding:5px 5px 5px 8px; border-top:1 white solid;
}
DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; }
DIV.clsMenu A:hover { color:moccasin; }
 
BUTTON { font-family:tahoma; font-size:100%; }
&lt;/style&gt;
 
&lt;SCRIPT LANGUAGE="Javascript"&gt;
var eOpenMenu = null;
 
function OpenMenu(eSrc,eMenu)
{
eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
eMenu.style.visibility = "visible";
eOpenMenu = eMenu;
}
 
function CloseMenu(eMenu)
{
eMenu.style.visibility = "hidden";
eOpenMenu = null;
}
 
function document.onmouseover()
{
var eSrc = window.event.srcElement;
if ("MenuMadde" == eSrc.className)
{
eSrc.style.color = "moccasin";
var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
if (eOpenMenu &amp;&amp; eOpenMenu != eMenu)
{
CloseMenu(eOpenMenu);
}
if (eMenu)
{
OpenMenu(eSrc,eMenu);
}
}
else if (eOpenMenu &amp;&amp; !eOpenMenu.contains(eSrc) &amp;&amp; !divMenuBar.contains(eSrc))
{
CloseMenu(eOpenMenu);
}
}
 
function document.onmouseout()
{
var eSrc = window.event.srcElement;
if ("MenuMadde" == eSrc.className)
{
eSrc.style.color = "";
}
}
 
&lt;/SCRIPT&gt;</font>

BODY..BODY arasÄ±na eklenecek kod

<font color="#ff6600">&lt;DIV ID="divMenuBar"&gt;
&lt;TABLE ID="tblMenuBar" BORDER="0"&gt;
&lt;TR&gt;
&lt;TD CLASS="MenuMadde" ID="tdMenuBarItem01"&gt;MENÃœ MADDE 01&lt;/TD&gt;
&lt;TD&gt;|&lt;/TD&gt;
&lt;TD CLASS="MenuMadde" ID="tdMenuBarItem02"&gt;MENÃœ MADDE 02&lt;/TD&gt;
&lt;TD&gt;|&lt;/TD&gt;
&lt;TD CLASS="MenuMadde" ID="tdMenuBarItem03"&gt;MENÃœ MADDE 03&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/DIV&gt;
 
&lt;DIV CLASS="clsMenu" ID="divMenu01"&gt;
&lt;DIV CLASS="clsMenuAra"&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="01.asp"&gt;Madde 01&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="02.asp"&gt;Madde 02&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="03.asp"&gt;Madde 03&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="04.asp"&gt;Madde 04&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="05.asp"&gt;Madde 05&lt;/A&gt;&lt;/DIV&gt;
&lt;/DIV&gt;
 
&lt;DIV CLASS="clsMenu" ID="divMenu02"&gt;
&lt;DIV CLASS="clsMenuAra"&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="11.asp"&gt;Madde 01&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="12.asp"&gt;Madde 02&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="13.asp"&gt;Madde 03&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="14.asp"&gt;Madde 04&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="15.asp"&gt;Madde 05&lt;/A&gt;&lt;/DIV&gt;
&lt;/DIV&gt;
 
&lt;DIV CLASS="clsMenu" ID="divMenu03"&gt;
&lt;DIV CLASS="clsMenuAra"&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="21.asp"&gt;Madde 01&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="22.asp"&gt;Madde 02&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="23.asp"&gt;Madde 03&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="24.asp"&gt;Madde 04&lt;/A&gt;&lt;/DIV&gt;
&lt;DIV&gt;&lt;A TARGET="_new" href="25.asp"&gt;Madde 05&lt;/A&gt;&lt;/DIV&gt;
&lt;/DIV&gt;</font>