Sol tuş menüsü oluşturmak

<style type="text/css">
.menuFront {
	position: absolute;
	visibility: hidden;
	top: 0px;
	left: 0px;
	background-color: #C0C0C0;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #000000;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #000000;
	margin: 1px;
	cursor: default;
	z-index: 11;
}

.menuBack {
	position: absolute;
	visibility: hidden;
	top: 0px;
	left: 0px;
	background-color: #C0C0C0;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	z-index: 10;
}

.item {
	position: absolute;
	visibility: inherit;
	color: #000000;
	font-size: 9pt;
	font-family: Arial, sans-serif;
	font-weight: bold;
	left: 1px;
	height: 15px;
	padding-left : 5px;
	z-index: 11;
}

.itemSep {
	position: absolute;
	visibility: inherit;
	left: 1px;
	height: 7px;
	padding-left: 5px;
	padding-right: 5px;
	z-index: 11;
}

.sep {
	position: absolute;
	color: #FFFFFF;
	width: 100%;
	height: 1px;
	z-index: 11;
}

.arrow {
	position: absolute;
	font-size: 9pt;
	font-family: Marlett, sans-serif;
	font-weight: normal;
	margin-top: 2px;
	z-index: 11;
}

</style>
<script language="JavaScript1.2">
var widthMax;
var heightMax;
var xCoor;
var yCoor;
var sWidth;
var sHeight;
var xScroll;
var widthScroll;

var menu = new Array;
var divId = new Array;

function rightClick()
{
  document.oncontextmenu = show;
  document.onclick = hideMenus;
}

function menuItem()
{
  this.item = arguments[0];
  this.hasSubMenu = arguments[1];
  this.level = arguments[2];
  this.subMenuFront = arguments[3];
  this.subMenuBack = arguments[4];
  this.subMenuOffset = arguments[5];
  this.link = arguments[6];
}

function findMenuLevel(parentId)
{
  for (i = 0; i < divId.length; i = i + 2)
    {
      if (divId[i] == (parentId + "Front"))
        {
          return divId[i + 1];
          break;
        }
    }
}

function createMenu(menuId, menuWidth, level)
{
  var frontLayer = document.createElement("DIV");
  with (frontLayer)
    {
      id = menuId + "Front";
      className = "menuFront";
      with (style)
        {
          posWidth = menuWidth;
          posHeight = 3;
          backgroundColor = outBgCr;
          visibility = "hidden";
        }
    }
  document.body.appendChild(frontLayer);
  var backLayer = document.createElement("DIV");
  with (backLayer)
    {
      id = menuId + "Back";
      className = "menuBack";
      with (style)
        {
          posWidth = menuWidth + 2;
          posHeight = 5;
          backgroundColor = outBgCr;          
          visibility = "hidden";
        }        
    }
  document.body.appendChild(backLayer);
  divId[divId.length] = menuId + "Front";
  divId[divId.length] = level;
  divId[divId.length] = menuId + "Back";
  divId[divId.length] = level;
}

function createItem(itemId, displayText, parentId, pageSrc, hasSubMenu)
{
  var menuFront = document.getElementById(parentId + "Front");
  var menuBack = document.getElementById(parentId + "Back");
  var level = findMenuLevel(parentId);
  var subMenuFront = "";
  var subMenuBack = "";
  var subMenuOffset = -1;
  var itemLayer = document.createElement("DIV");
  with (itemLayer)
    {
      onmouseover = over;
      onmouseout = out;
      onclick = goToLink;
      id = itemId;
      className = "item";
      if (displayText != "-")
        {
          if (hasSubMenu)
            {
              link = "";
              innerText = displayText;
              var sepLayer = document.createElement("DIV");
              with (sepLayer)
                {
                  className = "arrow";
                  innerText = "4";
                  with (style)
                    {
                      left = menuFront.style.posWidth - 20;
                    }                 
                  itemLayer.appendChild(sepLayer);
                }
            }
          else
            {
              innerText = displayText;
            }
          with (style)
            {
              posTop = menuFront.style.posHeight - 3;
              posWidth = menuFront.style.posWidth - 4;
              fontFamily = itemFont;
              color = outCr;
              if (hasSubMenu)
                {
                  subMenuOffset =  menuFront.style.posHeight - 3;
                }
            }
          menuFront.style.posHeight += 15;
          menuBack.style.posHeight += 15;
        }
    }
  menuFront.appendChild(itemLayer);
  menu[menu.length] = new menuItem(itemId, hasSubMenu, level, subMenuFront, subMenuBack, subMenuOffset, pageSrc);
}

function createSep(parentId)
{
  var menuFront = document.getElementById(parentId + "Front");
  var menuBack = document.getElementById(parentId + "Back");
  var sepLayer = document.createElement("DIV");
  with (sepLayer)
    {
      className = "itemSep";
      innerHTML = "<hr size=\"1\" class=\"sep\" align=\"center\">";
      with (style)
        {
          posTop = menuFront.style.posHeight;
          posWidth = menuFront.style.posWidth - 4;
        }
      menuFront.style.posHeight += 7;
      menuBack.style.posHeight += 7;
    }
  menuFront.appendChild(sepLayer);
}

function linkSubMenu(itemId, subMenuId)
{
  for (i = 0; i < menu.length; i++)
    {
      if (menu[i].item == itemId)
        {
          menu[i].subMenuFront = subMenuId + "Front";
          menu[i].subMenuBack = subMenuId + "Back";
          break;
        }
    }
}

function hideMenus()
{
  for (i = 0; i < divId.length; i = i + 2)
    {
      var menuLayer = document.getElementById(divId[i]);
      menuLayer.style.visibility = "hidden";
    }
}

function popUpPos()
{
  var menuFront = document.getElementById(divId[0]);
  var menuBack = document.getElementById(divId[2]);
  widthMax = document.body.clientWidth;
  heightMax = document.body.clientHeight;
  xCoor = window.event.x;
  yCoor = window.event.y;
  sWidth = menuFront.style.posWidth;
  sHeight = menuFront.style.posHeight;
  xScroll = document.body.scrollTop;
  widthScroll = document.body.offsetWidth - widthMax;
  xWidth = xCoor + sWidth;
  yHeight = yCoor + sHeight;

  if (menuFront.style.visibility == "hidden")
    {
      if (yHeight < (heightMax - 1))
        {
          menuFront.style.posTop = yCoor + xScroll;
          menuBack.style.posTop = yCoor + xScroll;
        }
      else
        {
          if (yCoor < sHeight)
            {
              menuFront.style.posTop = xScroll;
              menuBack.style.posTop = xScroll;            
            }
          else
            {
              menuFront.style.posTop = yCoor - sHeight + xScroll - 2;
              menuBack.style.posTop = yCoor - sHeight + xScroll - 2;
              if ((menuFront.style.posTop + menuFront.style.posHeight - xScroll + 2) > heightMax)
                {
                  menuFront.style.posTop = heightMax - menuFront.style.posHeight + xScroll - 2;
                  menuBack.style.posTop = heightMax - menuFront.style.posHeight + xScroll - 2;
                }
            }
        }

      if (xWidth < widthMax - 1)
        {
          menuFront.style.posLeft = xCoor;
          menuBack.style.posLeft = xCoor;
        }
      else
        {
          if (xCoor == (widthMax + 1))
            {
              menuFront.style.posLeft = xCoor - sWidth - 3;
              menuBack.style.posLeft = xCoor - sWidth - 3;
            }
          else
            {
              if (widthMax < xCoor)
                {
                  menuFront.style.posLeft = xCoor - sWidth - widthScroll - 1;
                  menuBack.style.posLeft = xCoor - sWidth - widthScroll - 1;
                }
              else
                {
                  menuFront.style.posLeft = xCoor - sWidth - 2;
                  menuBack.style.posLeft = xCoor - sWidth - 2;
                }
            }
        }
    }
}


function findOffset(itemId)
{
  offset = 0;
  for (i = 0; i < menu.length; i++)
    {
      if (itemId == document.getElementById(menu[i].item))
        {
          offset = menu[i].level;
          break;
        }
    } 
  for (i = 0; i < divId.length; i = i + 2)
    {
      if (offset == divId[i + 1])
        {
          return i;
        }
    }
}

function popUpSubPos(xCoor, yCoor, subMenuFront, subMenuBack, offset)
{ 
  var menuFront = document.getElementById(divId[offset]);
  var menuBack = document.getElementById(divId[offset + 2]);
  widthMax = document.body.clientWidth;
  heightMax = document.body.clientHeight;
  sWidth = subMenuFront.style.posWidth;
  sHeight = subMenuFront.style.posHeight;
  xScroll = document.body.scrollTop;
  widthScroll = document.body.offsetWidth - document.body.clientWidth;
  xWidth = xCoor + sWidth;
  yHeight = yCoor + sHeight;

  if (subMenuFront.style.visibility == "hidden")
    {
      if ((yHeight - xScroll) < (heightMax - 1))
        {
          subMenuFront.style.posTop = yCoor;
          subMenuBack.style.posTop = yCoor;
        }
      else
        {
          subMenuFront.style.posTop = yCoor - sHeight + 15;
          subMenuBack.style.posTop = yCoor - sHeight + 15;
        }

      if (xWidth < widthMax - 1)
        {
          subMenuFront.style.posLeft = xCoor;
          subMenuBack.style.posLeft = xCoor;
        }
      else
        {
          subMenuFront.style.posLeft = xCoor - menuFront.style.posWidth - subMenuFront.style.posWidth + 5;
          subMenuBack.style.posLeft = xCoor - menuFront.style.posWidth - subMenuFront.style.posWidth + 5;
        }
    }
}

function show()
{
  var source = window.event.srcElement.tagName;
  var menuFront = document.getElementById(divId[0]);
  var menuBack = document.getElementById(divId[2]);
  if (menuFront.style.visibility == "hidden")
    {
      if (source != "A" && source != "IMG" && source != "INPUT" && source != "SELECT" && source != "TEXTAREA")
        {
          popUpPos();
          menuFront.style.visibility = "visible";
          menuBack.style.visibility = "visible";
          return false;
        }
    }
  else
    {
      hideMenus();
    }
}

function checkElement(itemId)
{
  if (itemId.className == "arrow")
    {
      return itemId.parentElement;
    }
  else
    {
      return itemId;
    }
 }
 
function over()
{
  var itemId = event.srcElement;
  itemId = checkElement(itemId);
  offset = findOffset(itemId);
  var menuFront = document.getElementById(divId[offset]);
  var xCoor = menuFront.style.posLeft + itemId.style.posWidth;
  var yCoor = menuFront.style.posTop;
  var divSubId = divId.slice(4);
  itemId.style.backgroundColor = overBgCr;
  itemId.style.color = overCr;
  for (i = 0; i < menu.length; i++)
    {      
      if (itemId == document.getElementById(menu[i].item))
        {        
          for (j = 0; j < divSubId.length; j = j + 2)
            {             
              if ((menu[i].level) < divSubId[j + 1])
                {
                  var subMenu = document.getElementById(divSubId[j]);
                  subMenu.style.visibility = "hidden";
                }
            }
          if (menu[i].hasSubMenu)
            {
              var subMenuFront = document.getElementById(menu[i].subMenuFront);
              var subMenuBack = document.getElementById(menu[i].subMenuBack);
              subMenuFront.style.zIndex = menu[i].level + 12;
              subMenuBack.style.zIndex = menu[i].level + 11;
              popUpSubPos(xCoor, yCoor + menu[i].subMenuOffset, subMenuFront, subMenuBack, offset);
              subMenuFront.style.visibility = "visible";
              subMenuBack.style.visibility = "visible";                              
            }
          break;
        }        
    }
}

function out()
{
  var itemId = event.srcElement;
  itemId = checkElement(itemId);  
  itemId.style.backgroundColor = outBgCr;
  itemId.style.color = outCr;
}

function goToLink()
{
  var itemId = event.srcElement;
  for (i = 0; i < menu.length; i++)
    {
      if ((itemId == document.getElementById(menu[i].item)) && (menu[i].link != ""))      
        {
          window.location.href = menu[i].link;
          break;
        }
    }
}

function isIE()
{
  return (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion >= 5))
}

if (isIE)
  {
    document.onload = hideMenus;
    document.onclick = show;
  }
</script>
<script language="JavaScript1.2">
var overBgCr = "#3333CC";
var overCr = "#FFFFFF";
var outBgCr = "#C0C0C0";
var outCr    = "#000000";
var itemFont = "Arial";

function createPopUpMenu()
{
  createMenu("menu1", 150, 0); // Ana menüyü olusturmak için.
  createItem("item1", "Link 1", "menu1", "http://www.ipucu.web.tr", false); // menü1'e link ekleniyor.
  createItem("item2", "Link 2", "menu1", "http://www.ipucu.web.tr", false); // menü1'e link ekleniyor.
  createItem("item3", "Link 3", "menu1", "", true); // alt menüsü olan bir item ekleniyor.
  createItem("item4", "Link 4", "menu1", "http://www.ipucu.web.tr", false); // menü1'e link ekleniyor.
  createItem("item5", "Link 5", "menu1", "http://www.ipucu.web.tr", false); // menü1'e link ekleniyor.

  createMenu("menu2", 200, 1); //Alt menüyü olusturmak için. menü 2
  createItem("item6", "Link 6", "menu2", "http://www.ipucu.web.tr", false); // menü2'ye link ekleniyor.
  createItem("item7", "Link 7", "menu2", "http://www.ipucu.web.tr", false); // menü2'ye link ekleniyor.
  createItem("item8", "Link 8", "menu2", "http://www.ipucu.web.tr", false); // menü2'ye link ekleniyor.
  createItem("item9", "Link 9", "menu2", "http://www.ipucu.web.tr", false); // menü2'ye link ekleniyor.

  linkSubMenu("item3", "menu2"); // menu2 deki 3ncü item ile 2nci menüyü iliskilendiriliyor..
}
</script>