Renkli Açılır Menü [ Örnek ]

<style> 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%; } </style> <SCRIPT LANGUAGE="Javascript"> 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 && eOpenMenu != eMenu) { CloseMenu(eOpenMenu); } if (eMenu) { OpenMenu(eSrc,eMenu); } } else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)) { CloseMenu(eOpenMenu); } } function document.onmouseout() { var eSrc = window.event.srcElement; if ("MenuMadde" == eSrc.className) { eSrc.style.color = ""; } } </SCRIPT> Aşağısı Body Kısmına Eklenecek------------------------- <DIV ID="divMenuBar"> <TABLE ID="tblMenuBar" BORDER="0"> <TR> <TD CLASS="MenuMadde" ID="tdMenuBarItem01">MENÜ MADDE 01</TD> <TD>|</TD> <TD CLASS="MenuMadde" ID="tdMenuBarItem02">MENÜ MADDE 02</TD> <TD>|</TD> <TD CLASS="MenuMadde" ID="tdMenuBarItem03">MENÜ MADDE 03</TD> <TD>|</TD> <TD CLASS="MenuMadde" ID="tdMenuBarItem02">MENÜ MADDE 04</TD> <TD>|</TD> </TR> </TABLE> </DIV> <DIV CLASS="clsMenu" ID="divMenu01"> <DIV CLASS="clsMenuAra"></DIV> <DIV><A TARGET="_new" HREF="01.asp" _fcksavedurl="01.asp">Madde 01</A></DIV> <DIV><A TARGET="_new" HREF="02.asp" _fcksavedurl="02.asp">Madde 02</A></DIV> <DIV><A TARGET="_new" HREF="03.asp" _fcksavedurl="03.asp">Madde 03</A></DIV> <DIV><A TARGET="_new" HREF="04.asp" _fcksavedurl="04.asp">Madde 04</A></DIV> <DIV><A TARGET="_new" HREF="05.asp" _fcksavedurl="05.asp">Madde 05</A></DIV> </DIV> <DIV CLASS="clsMenu" ID="divMenu02"> <DIV CLASS="clsMenuAra"></DIV> <DIV><A TARGET="_new" HREF="11.asp" _fcksavedurl="11.asp">Madde 01</A></DIV> <DIV><A TARGET="_new" HREF="12.asp" _fcksavedurl="12.asp">Madde 02</A></DIV> <DIV><A TARGET="_new" HREF="13.asp" _fcksavedurl="13.asp">Madde 03</A></DIV> <DIV><A TARGET="_new" HREF="14.asp" _fcksavedurl="14.asp">Madde 04</A></DIV> <DIV><A TARGET="_new" HREF="15.asp" _fcksavedurl="15.asp">Madde 05</A></DIV> </DIV> <DIV CLASS="clsMenu" ID="divMenu03"> <DIV CLASS="clsMenuAra"></DIV> <DIV><A TARGET="_new" HREF="21.asp" _fcksavedurl="21.asp">Madde 01</A></DIV> <DIV><A TARGET="_new" HREF="22.asp" _fcksavedurl="22.asp">Madde 02</A></DIV> <DIV><A TARGET="_new" HREF="23.asp" _fcksavedurl="23.asp">Madde 03</A></DIV> <DIV><A TARGET="_new" HREF="24.asp" _fcksavedurl="24.asp">Madde 04</A></DIV> <DIV><A TARGET="_new" HREF="25.asp" _fcksavedurl="25.asp">Madde 05</A></DIV> </DIV>