Red Menu

[Total: 0    Average: 0/5]

This script shows a normal menu that has hidden dhtml suprises.

Head Code:

<style>
<!--
.subhead {
color: #ffffff; font-size: 12px; font-weight: bold; padding-bottom: 4px
}
.menu {
background-color: #ffffff; border-bottom: #000000 1px solid; border-left: #000000 1px solid;
border-right: #000000 1px solid; border-top: #000000 1px solid;
color: #000000; font-family: arial; font-size: 11px; line-height: 12px;
padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;
position: absolute; visibility: hidden; width: 175px; zindex: 99; layer-background-color: #eae8e8
}
A.sub:link    { color : green; }
A.sub:visited { color : green; }
A.sub:active  { color : green; }
A.sub:hover   { color : green; background-color:#FFFF33;}

-->
</style>

Body Code:

<SCRIPT language=javascript>
    version = '0';
     var isMacIE = ( (navigator.userAgent.indexOf("IE 4") > -1) && (navigator.userAgent.indexOf("Mac")  > -1) );
     browserName = navigator.appName;           
     browserVer = parseInt(navigator.appVersion); 
        if (browserName == "Netscape" && browserVer >= 4)version = "n4";
        else if (browserName == "Microsoft Internet Explorer" && browserVer >= 4) version = "e4";
             
        if (version == "n4" || version == "e4" && !isMacIE)     
    
    
    
    {         
document.write('' +
'<div id=menu1 class="menu"><b>Menu 1</b><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub1-A</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub1-B</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub1-C</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub1-D</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub1-E</a><br></div>' +

'<div id=menu2 class="menu"><b>Menu 2</b><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub2-A</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub2-B</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub2-C</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub2-D</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub2-E</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub2-F</a><br></div>' +

'<div id=menu3 class="menu"><b>Menu 3</b><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub3-A</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub3-B</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub3-C</a><br></div>' +

'<div id=menu4 class="menu"><b>Menu 4</b><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub4-A</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub4-B</a><br></div>' +

'<div id=menu5 class="menu"><b>Menu 5</b><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub5-A</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub5-B</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub5-C</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub5-D</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub5-E</a><br></div>' +

'<div id=menu6 class="menu"><b>Menu 6</b><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub6-A</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub6-B</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub6-C</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub6-D</a><br>'+
'<a href="#" onmouseover=timer(1); onmouseout=timer(0); class=sub>Sub6-E</a><br></div>' )
}

</SCRIPT>
<DIV class=menu id=layerTest style="width: 47; height: 8"></DIV>
<SCRIPT language=javascript>
var unself
window.onerror = new Function("return true;");

var isNS = (navigator.appName == "Netscape");
var isMacIE = ( (navigator.userAgent.indexOf("IE 4") > -1) && (navigator.userAgent.indexOf("Mac")  > -1) );
var layerRef = (isNS) ? "document" : "document.all";
var styleRef = (isNS) ? "" : ".style";
var isDynamic = ( ((document.layers && document.layers['layerTest']) || (document.all && document.all['layerTest'])) && !isMacIE );


function getXCoord(imgID) {
        if (isNS) xPos = document.images[imgID].x;
        else xPos = getIEXCoord(imgID)
        return xPos;
}

function getYCoord(imgID) {
  if (isNS) yPos = document.images[imgID].y;
  else yPos = getIEYCoord(imgID);
  return yPos;
}

function getIEXCoord(imgElem) {
        xPos = eval(imgElem).offsetLeft;
        tempEl = eval(imgElem).offsetParent;
        while (tempEl != null) {
                xPos += tempEl.offsetLeft;
                tempEl = tempEl.offsetParent;
        }
        return xPos;
}

function getIEYCoord(imgElem) {
        yPos = eval(imgElem).offsetTop;
        tempEl = eval(imgElem).offsetParent;
        while (tempEl != null) {
                yPos += tempEl.offsetTop;
                tempEl = tempEl.offsetParent;
        }
        return yPos;
}


var activeMenu = 0;

function activateMenu(menuLayerRef, imageName, left, top) {
var lightsout
    if (isDynamic && activeMenu != menuLayerRef) {
        if (activeMenu) hideMenu("menu" + activeMenu); 
        menuID = "menu" + menuLayerRef;
        activeMenu = menuLayerRef;

          if (isNS) {
              document[menuID].left = getXCoord(imageName) + left;
              document[menuID].top = getYCoord(imageName) + top;
          } 
  else {
            document.all[menuID].style.pixelLeft = getXCoord(imageName) + left;
            document.all[menuID].style.pixelTop = getYCoord(imageName) + top;
        }
        showMenu(menuID, left, top)
    }
}

function showMenu(layerID, left, top) {
    eval(layerRef + '["' + layerID + '"]' + 
    styleRef + '.visibility = "visible"');
}

function hideMenu(layerID) {
    eval(layerRef + '["' + layerID + '"]' + 
    styleRef + '.visibility = "hidden"');
}

// check if there's a menu active
function turnOff() {
    if (activeMenu) {
        menuID = "menu" + activeMenu;
        hideMenu(menuID);
        activeMenu = 0;
    }
}

// kills menu on clickup
function init() {
    if (isDynamic) {
        if (isNS) {
            document.captureEvents(Event.mouseup);
        }
        document.onmouseup = turnOff;
    }
}

// this function needs to be called from the sub menus DIV
function hideMe() {
    if (activeMenu) {
        menuID = "menu" + activeMenu;
        hideMenu(menuID);
        activeMenu = 0;
    }
}

// Work-around Netscape resize bug
if (isDynamic && isNS) {
    origWidth = innerWidth;
    origHeight = innerHeight;   
}
        
function reDo() {       
    if (innerWidth != origWidth || innerHeight != origHeight) {
        location.reload();
    }
}       

if (isDynamic && isNS) {
    onresize = reDo;
}

function timer(offon)  {
if (offon == 0) {
    unself = setTimeout('turnOff()', 1200);
    }
if (offon ==1) {
clearTimeout(unself);
}
}
</SCRIPT>

      <TABLE border=0 cellPadding=0 cellSpacing=0>
      <TBODY>
      <TR>

          <TD align=center vAlign=top bgcolor="#CC0000">
		  <!--
		    The image named "tools" is the basis for the location of the menu items.
		  -->
            <p align="center"><font size="1"><IMG border=0 height=1 width=1 name=tools
          src="http://www.somesite.com/nopic.gif" width="110"><BR>
              <A
          href="#"
          onmouseout="display(02,about); timer(0);"
          onmouseover="activateMenu(1,'tools',110,25); display(01,about); timer(1);"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Menu 1</font></A><BR>
              <BR>
              <A
          href="#"
          onmouseout="display(04,products); timer(0);"
          onmouseover="activateMenu(2,'tools',110,50);display(03,products); timer(1);"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Menu 2</font></A><BR>
              <BR>
              <A
          href="#"
          onmouseout="display(06,web); timer(0);"
          onmouseover="activateMenu(3,'tools',110,80);display(05,web); timer(1);"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Menu 3</font></A><BR>
              <BR>
              <A
          href="#"
          onmouseout="display(10,script); timer(0);"
          onmouseover="activateMenu(4,'tools',110,110);display(07,script); timer(1);"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Menu 4</font></A><BR>
              <BR>
              <A
          href="#"
          onmouseout="display(08,stb); timer(0);"
          onmouseover="activateMenu(5,'tools',110,130);display(09,stb); timer(1);"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Menu 5</font></A><BR>
              <BR>
              <A
          href="#"
          onmouseout="display(10,script); timer(0);"
          onmouseover="activateMenu(6,'tools',110,150);display(09,script); timer(1);"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Menu 6</font></A><BR>
              <BR>
              <A
          href="#"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Non PopUp 1</font></A><BR>
              <BR>
              <A
          href="#"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Non PopUp 2</font></A><BR>
              <BR>
              <A
          href="#"><font
          face="Arial, Helvetica, sans-serif" color="white" size="2">Non PopUp 3</font></A><BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
              <BR>
        </font>
        </p>
        </TD>
    </TR></TBODY></TABLE>

Times Viewed: 1

Leave a Reply

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