Ders Adı: CSS ile Açılır Menu
Kategorisi: CSS Etiketleri
Ekleyen: netcat - Tarih: 01.10.2006 - 15:09

Web sayfanızın <HEAD></HEAD> kodları arasına aşağıdaki kodları aynen, değiştirmeden yerleştirin.
<style type="text/css">
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; }

</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>


Daha sonra <BODY></BODY> kodları arasına yani menünüzü koymak istediğiniz yere de aşağıdaki kodları yerleştirin.
<DIV ID="divMenuBar">
<TABLE ID="tblMenuBar" BORDER="0">
<TR>
<TD CLASS="MenuMadde" ID="tdMenuBarItem01">Burayı kendinize göre değiştirin!</TD>
<TD>|</TD>
<TD CLASS="MenuMadde" ID="tdMenuBarItem02">Burayı kendinize göre değiştirin!</TD>
<TD>|</TD>
<TD CLASS="MenuMadde" ID="tdMenuBarItem03">Burayı kendinize göre değiştirin!</TD>
</TR>
</TABLE>
</DIV>

<DIV CLASS="clsMenu" ID="divMenu01">
<DIV CLASS="clsMenuAra"></DIV>
<DIV><A TARGET="_new" HREF="01.html">Alt Madde 01</A></DIV>
<DIV><A TARGET="_new" HREF="04.html">Alt Madde 04</A></DIV>
<DIV><A TARGET="_new" HREF="05.html">Alt Madde 05</A></DIV>
</DIV>

<DIV CLASS="clsMenu" ID="divMenu02">
<DIV CLASS="clsMenuAra"></DIV>
<DIV><A TARGET="_new" HREF="11.html">Alt Madde 01</A></DIV>
<DIV><A TARGET="_new" HREF="12.html">Alt Madde 02</A></DIV>
<DIV><A TARGET="_new" HREF="13.html">Alt Madde 03</A></DIV>
<DIV><A TARGET="_new" HREF="14.html">Alt Madde 04</A></DIV>
<DIV><A TARGET="_new" HREF="15.html">Alt Madde 05</A></DIV>
</DIV>

<DIV CLASS="clsMenu" ID="divMenu03">
<DIV CLASS="clsMenuAra"></DIV>
<DIV><A TARGET="_new" HREF="21.html">Alt Madde 01</A></DIV>
<DIV><A TARGET="_new" HREF="22.html">Alt Madde 02</A></DIV>
<DIV><A TARGET="_new" HREF="23.html">Alt Madde 03</A></DIV>
</DIV>
Menülerin isimlerini kendinize göre değiştirebilir, menü ekleyebilir, alt menü ekleyebilir ya da silebilirsiniz.
<BODY> kodları arasına koyduğunuz kodlarda istediğiniz gibi değişiklikler yapabilirsiniz.


Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=131
Web Sitesi: http://www.aeyStudio.com