Javascript Menü -- Alt Tarafa Açılan Menü

← LİSTEYE DÖN

Açıklama

Javascript ile yapılmış güzel bir menü örneği. Bir çok sitede örneklerini görebilirsiniz.
JS SOURCE CODE 
////  ADIM 1  <HEAD> Bölümleri Arasına Eklenecek Olan Bölüm

<style>
BODY { font-family:verdana, arial, helvetica; font-size:70%; }
 H1 { font-size:120%; font-style:italic; }
 
 DIV#divMenuBar { background-color:#999999; }
 TABLE#tblMenuBar TD { font-size:70%; color:white; padding:0px 5px 0px 5px; cursor:default; }
 TABLE#tblMenuBar TD.MenuMadde { font-weight:bold; cursor:hand; }
 
 DIV.clsMenu { 
  font-size:100%; background-color:#999999; 
  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>


//  ADIM 2...  BODY Bölümüne eklenecek olan bölüm

<!-- ANA BAŞLIKLAR YAZDIRILIYOR... -->
<DIV ID="divMenuBar">
<TABLE ID="tblMenuBar" BORDER="0">
<TR>
  <TD CLASS="MenuMadde" ID="tdMenuBarItem01">ANA BAŞLIK 1</TD>
<TD>|</TD>
  <TD CLASS="MenuMadde" ID="tdMenuBarItem02">ANA BAŞLIK 2</TD>
<TD>|</TD>
  <TD CLASS="MenuMadde" ID="tdMenuBarItem03">ANA BAŞLIK 3</TD>
<TD>|</TD>
  <TD CLASS="MenuMadde" ID="tdMenuBarItem04">ANA BAŞLIK 4</TD>
<TD>|</TD>
  <TD CLASS="MenuMadde" ID="tdMenuBarItem05">ANA BAŞLIK 5</TD>
</TR>
</TABLE>
</DIV>

<!-- 1. ANA BAŞLIĞIN ALT BAŞLIKLARI YAZDIRILIYOR... -->
<DIV CLASS="clsMenu" ID="divMenu01">
<DIV CLASS="clsMenuAra"></DIV>
 <DIV><A TARGET="_new" HREF="link_1.asp">Alt Başlık 1</A></DIV>
 <DIV><A TARGET="_new" HREF="link_2.asp">Alt Başlık 2</A></DIV>
 <DIV><A TARGET="_new" HREF="link_3.asp">Alt Başlık 3</A></DIV>
 <DIV><A TARGET="_new" HREF="link_4.asp">Alt Başlık 4</A></DIV>
 <DIV><A TARGET="_new" HREF="link_5.asp">Alt Başlık 5</A></DIV>
</DIV>

<!-- 2. ANA BAŞLIĞIN ALT BAŞLIKLARI YAZDIRILIYOR... -->
<DIV CLASS="clsMenu" ID="divMenu02">
<DIV CLASS="clsMenuAra"></DIV>
 <DIV><A TARGET="_new" HREF="link_6.asp">Alt Başlık 01</A></DIV>
 <DIV><A TARGET="_new" HREF="link_7.asp">Alt Başlık 02</A></DIV>
 <DIV><A TARGET="_new" HREF="link_8.asp">Alt Başlık 03</A></DIV>
 <DIV><A TARGET="_new" HREF="link_9.asp">Alt Başlık 04</A></DIV>
</DIV>

<!-- 3. ANA BAŞLIĞIN ALT BAŞLIKLARI YAZDIRILIYOR... -->
<DIV CLASS="clsMenu" ID="divMenu03">
<DIV CLASS="clsMenuAra"></DIV>
 <DIV><A TARGET="_new" HREF="link_10.asp">Alt Başlık 01</A></DIV>
 <DIV><A TARGET="_new" HREF="link_11.asp">Alt Başlık 02</A></DIV>
</DIV>

<!-- 4. ANA BAŞLIĞIN ALT BAŞLIKLARI YAZDIRILIYOR... -->
<DIV CLASS="clsMenu" ID="divMenu04">
<DIV CLASS="clsMenuAra"></DIV>
 <DIV><A TARGET="_new" HREF="link_12.asp">Alt Başlık 01</A></DIV>
 <DIV><A TARGET="_new" HREF="link_13.asp">Alt Başlık 02</A></DIV>
 <DIV><A TARGET="_new" HREF="link_14.asp">Alt Başlık 02</A></DIV>
</DIV>

<!-- 5. ANA BAŞLIĞIN ALT BAŞLIKLARI YAZDIRILIYOR... -->
<DIV CLASS="clsMenu" ID="divMenu05">
<DIV CLASS="clsMenuAra"></DIV>
 <DIV><A TARGET="_new" HREF="link_15.asp">Alt Başlık 01</A></DIV>
 <DIV><A TARGET="_new" HREF="link_16.asp">Alt Başlık 02</A></DIV>
 <DIV><A TARGET="_new" HREF="link_17.asp">Alt Başlık 02</A></DIV>
</DIV>

Detaylı İnceleme

Menüyü kullanmak için iki adımın takip edilmesi gerekmektedir. Birinci adımda bulunan kodları head tagları arsına yerleştirmeniz gerekmektedir. Bu Bölümdeki kodlar sayfanın renk-yazı tiplerini ayarlanmakta ve menü işlemlerini gerçekleştirmektedir. İkinci adımda bulunan kodların ise body tagları arasına kopyalanması gerekmektedir. Bu bölümde ise menüler ve bu menülerin alt başlıkları ile linkleri ayarlanmaktadır. Sizde bu bölümü inceleyerek kendi sitenize göre linkleri ayarlayabilirsiniz. Kolaylık olması amacıyla anabaşlıklar ve onların alt başlıkları ayrı ayrı belirtilmiştir.
Görüntülenme: 5654
Ekleyen: Administrator
← JS Örneklerine Geri Dön