JavaScript Kod Örnekleri - JavaScript Code Samples

////  ADIM 1  <HEAD> Bölümleri Arasına Eklenecek Olan Bölüm

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

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

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

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

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

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

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

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.

Ekleyen : Administrator

JavaScript Kod Örnegi (JavaScript Code Sample)

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

Javascript ile yapılmış güzel bir menü örneği. Bir çok sitede örneklerini görebilirsiniz.