Left Click (Popup Navigation Menu)

[Total: 0    Average: 0/5]

This is a very neat left click menu.

Head Code:

<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">
/*
Left Click 1.1 by Toh Zhiqiang
Homepage: http://www.tohzhiqiang.f2s.com/leftclick/index.php
Email: webmaster@tohzhiqiang.com

LICENSE AGREEMENT:

THIS SOFTWARE (LEFT CLICK) IS PROVIDED ON AN "AS-IS" BASIS WITHOUT WARRANTY OF
ANY KIND.

DEVELOPER SPECIFICALLY DISCLAIMS ANY OTHER WARRANTY, EXPRESS OR
IMPLIED, INCLUDING ANY WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR 
PURPOSE. IN NO EVENT SHALL DEVELOPER BE LIABLE FOR ANY CONSEQUENTIAL, INDIRECT, 
SPECIAL OR INCIDENTAL DAMAGES, EVEN WHEN DEVELOPER HAS BEEN ADVISED BY USER OF 
THE POSSIBILITY OF SUCH POTENTIAL LOSS OR DAMAGE. USER AGREES TO HOLD DEVELOPER 
HARMLESS FROM AND AGAINST ANY AND ALL CLAIMS, LOSSES, LIABILITIES AND EXPENSES.

YOU ARE FREE TO MODIFY THE SOURCE CODE OF THIS SOFTWARE IN ANYWAY YOU LIKE. 
HOWEVER, UNDER NO CIRCUMSTANCES SHOULD YOU CLAIM YOURSELF TO BE THE ORIGINAL 
CREATOR OF THIS SOFTWARE.
*/

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); //creates the main menu layer called menu1 (with level 0)
  createItem("item1", "Item 1", "menu1", "blank.htm", false); //add an item to menu1
  createItem("item2", "Item 2", "menu1", "blank.htm", false); //add an item to menu1
  createItem("item3", "Item 3", "menu1", "", true); //add an item that has a sub menu
  createItem("item4", "Item 4", "menu1", "blank.htm", false); //add an item to menu1
  createItem("item5", "Item 5", "menu1", "blank.htm", false); //add an item to menu1

  createMenu("menu2", 200, 1); //create a sub menu layer called menu2 (with level 1)
  createItem("item6", "Item 6", "menu2", "blank.htm", false); //add an item to menu2
  createItem("item7", "Item 7", "menu2", "blank.htm", false); //add an item to menu2
  createItem("item8", "Item 8", "menu2", "blank.htm", false); //add an item to menu2
  createItem("item9", "Item 9", "menu2", "blank.htm", false); //add an item to menu2

  linkSubMenu("item3", "menu2"); //link menu item item3 to sub menu layer menu2
}
</script>

Init Code:

createPopUpMenu();

Body Code:

Just Left click now to see the menu!

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *