Menu – DHTML Grow-Box

[Total: 0    Average: 0/5]

This shows how to have a menu that grows up a DHTML box which contains the 2nd level menus.

Body Code:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="16%" bgcolor="bluesteel">
<a NAME="TOP">
<script LANGUAGE="JAVASCRIPT" TYPE="text/javascript">
<!--
function textRoll(strTextColor)
  {
window.event.srcElement.style.color = strTextColor;
window.event.cancelBubble = true;
}

//-->
</script>
<div align=left>
<basefont FACE="VERDANA,ARIAL,HELVETICA" SIZE="3">
<table width="108">

<span ID="StartMenu" STYLE="display:none; position:absolute;"></span> <script
    LANGUAGE="JavaScript">
<!--
var g_nChunk;
var useragent = navigator.userAgent;
 
function HideErrors(){return true;}

function doMenu(id,oElement)
{
var thisMenu = document.all(id);

if (thisMenu == AnimatedMenu)
{8
window.event.cancelBubble = true;
return false;
}
if (AnimatedMenu != null) AnimatedMenu.style.display = "none";

window.event.cancelBubble = true;


AnimatedMenu = thisMenu;
thisMenu.style.clip = "rect(0 0 0 0)";
thisMenu.style.display ="block";
g_nChunk = 25;
window.setTimeout("showMenu()", 10);

return true;
}

function showMenu()
{
AnimatedMenu.style.clip = "rect(0 "+ g_nChunk + "% " + g_nChunk + "% 0)"
g_nChunk +=15
g_nChunk<=100?window.setTimeout("showMenu()",20):null
}

function hideMenu()
{
AnimatedMenu.style.display = "none";
AnimatedMenu = StartMenu;
window.event.cancelBubble = true;
}

function keepMenu(){window.event.cancelBubble = true;}

document.onclick = hideMenu;
document.onmouseover = hideMenu; 
window.onerror = HideErrors;

  if ((useragent.indexOf("IE")!= -1) && (useragent.indexOf("Mac") == -1) && (parseInt(navigator.appVersion) >= 4))
  {
  var AnimatedMenu = StartMenu;
  var fBrowserOK = true;
}

//-->
</script> 
</a>
<td width="100"><div align="left">
<table CELLSPACING="0"
    CELLPADDING="0" BORDER="0" height="87" width="99">
      <tr>
        <td onMouseOver="textRoll('yellow');doMenu('navMenu1',this);"
        onMouseOut="textRoll('darkgreen');" VALIGN="middle" ALIGN="left" height="29" 
width="97"><font face="Courier New"><font
        style="text-decoration:none;COLOR:darkblue;font-size:12px;font-weight:bold"><span
        style="color: rgb(40,0,0)"><a href="#">Main 1</a></span></font><font
        SIZE="1"><br>
         </font></font></td>
        <script LANGUAGE="JavaScript">
            <!--
            if (fBrowserOK)
            {
               
                document.write("<SPAN ID="navMenu1" onMouseover="keepMenu();" STYLE="text-align:left;width:115;word-spacing:30;padding-top:7;padding-left:7;padding-bottom:7;display:none;position:absolute;left:15;top:30;background-color:black;z-index:9;BORDER-BOTTOM:silver outset 2px;BORDER-LEFT:white outset 2px;BORDER-RIGHT: silver outset 2px;BORDER-TOP: white outset 2px;">");
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="#"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">Sub Menu 1</FONT></u></A>");
                       document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">2</FONT></u></A>");
                       document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">3</FONT></u></A>");
                       document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">4</FONT></u></A>");
                       document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">5</FONT></u></A>");
                       document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">6</FONT></u></A>");
                document.write("<FONT SIZE="1"><BR> </FONT><BR>");
              document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Courier New, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">7</FONT></u></A>");
            document.write("</SPAN>");       
            }
            //-->
            </script>

      </tr>
      <tr>
        <td onMouseOver="textRoll('yellow');doMenu('navMenu2',this);"
        onMouseOut="textRoll('darkgreen');" VALIGN="middle" ALIGN="left" height="27" width="97"><font face="Courier New"><font
        style="text-decoration:none;COLOR:darkblue;font-size:12px;font-weight:bold"><span
        style="color: rgb(255,0,0)"><a HREF="http://www.js-examples.com/">Menu 2</a></span></font><font
        SIZE="1"><br>
         </font></font></td>
            <tr>
        <script LANGUAGE="JavaScript">
            <!--
            if (fBrowserOK)
            {
            document.write("<SPAN ID="navMenu2" onMouseover="keepMenu();" STYLE="text-align:left;width:115;word-spacing:30;padding-top:7;padding-left:7;padding-bottom:7;display:none;position:absolute;left:15;top:60;background-color:black;z-index:9;BORDER-BOTTOM:silver outset 2px;BORDER-LEFT:white outset 2px;BORDER-RIGHT: silver outset 2px;BORDER-TOP: white outset 2px;">");
               document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">Sub 1</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">2</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
               document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">2</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>");
     document.write("</SPAN>");       
            }
            //-->
            </script>

      </tr>      <tr>
        <td onMouseOver="textRoll('yellow');doMenu('navMenu3',this);"
        onMouseOut="textRoll('darkgreen');" VALIGN="middle" ALIGN="left" height="31" width="97"><font face="Courier New"><font size="1"
        style="text-decoration:none;COLOR:darkblue;font-size:12px;font-weight:bold"><span
        style="color: rgb(255,0,0)"><a HREF="http://www.js-examples.com/">Menu 3</a></span></font><font
        SIZE="1"><br>
         </font></font></td>
            <tr>
        <script LANGUAGE="JavaScript">
            <!--
            if (fBrowserOK)
            {
               
            document.write("<SPAN ID="navMenu3" onMouseover="keepMenu();" STYLE="text-align:left;width:100;word-spacing:30;padding-top:15;padding-left:7;padding-bottom:7;display:none;position:absolute;left:15;top:90;background-color:black;z-index:9;BORDER-BOTTOM:silver outset 2px;BORDER-LEFT:white outset 2px;BORDER-RIGHT: silver outset 2px;BORDER-TOP: white outset 2px;">");
               document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">Sub 1</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="mailto:test@js-examples.com"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-vertical-align: middle-decoration: underline;font-size:12px">E-mail Me</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
     document.write("</SPAN>");       
            }
            //-->
            </script>

      </tr>

      <tr>
        <td onMouseOver="textRoll('yellow');doMenu('navMenu4',this);"
        onMouseOut="textRoll('darkgreen');" VALIGN="middle" ALIGN="left" height="29" width="97"><font face="Courier New"><font
        style="text-decoration:none;COLOR:darkblue;font-size:12px;font-weight:bold"><span
        style="color: rgb(255,0,0)"><a href="http://www.js-examples.com/">Menu 4</a></span></font><font
        SIZE="1"><br>
         </font></font></td>
        <script LANGUAGE="JavaScript">
            <!--
            if (fBrowserOK)
            {
               
            document.write("<SPAN ID="navMenu4" onMouseover="keepMenu();" STYLE="text-align:left;width:100;word-spacing:30;padding-top:7;padding-left:7;padding-bottom:7;display:none;position: absolute;left:15;top:125;background-color:black;z-index:9;BORDER-BOTTOM:silver outset 2px;BORDER-LEFT:white outset 2px;BORDER-RIGHT: silver outset 2px;BORDER-TOP: white outset 2px;">");
               document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK A</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK B</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK C</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://yourlink"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK D</FONT></u></A>");
            document.write("</SPAN>");       
            }
            //-->
            </script>

      </tr>
      <tr>
        <td onMouseOver="textRoll('yellow');doMenu('navMenu5',this);"
        onMouseOut="textRoll('darkgreen');" VALIGN="middle" ALIGN="left" height="29" width="97"><font face="Courier New"><font
        style="text-decoration:none;COLOR:darkblue;font-size:12px;font-weight:bold"><span
        style="color: rgb(255,0,0)"><a href="your-link-here">Menu 5</a></span></font><font
        SIZE="1"><br>
         </font></font></td>
        <script LANGUAGE="JavaScript">
            <!--
            if (fBrowserOK)
            {
               
            document.write("<SPAN ID="navMenu5" onMouseover="keepMenu();" STYLE="text-align:left;width:100;word-spacing:30;padding-top:7;padding-left:7;padding-bottom:7;display:none;position:absolute;left:15;top:155;background-color:black;z-index:9;BORDER-BOTTOM:silver outset 2px;BORDER-LEFT:white outset 2px;BORDER-RIGHT: silver outset 2px;BORDER-TOP: white outset 2px;">");
               document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://w.x.c"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK A</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://w.x.c"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK B</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://w.x.c"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK C</FONT></u></A>");
                 document.write("<FONT SIZE="1"><BR> </FONT><BR>"); 
        document.write("<A onMouseOver="textRoll('yellow');" onMouseOut="textRoll('darkgreen')" TARGET="right" HREF="http://w.x.c"><u><FONT FACE="Arial, Verdana, Helvetica" SIZE="2" COLOR="darkgreen" STYLE="text-decoration: underline;font-size:12px">LINK D</FONT></u></A>");
            document.write("</SPAN>");       
            }
            //-->
            </script>

      </tr>

    </table>
    </div>
</table>
</div>

    <td width="23%" valign="top">

    <td width="31%" valign="top">

    <td width="25%" valign="top">
  </tr>
</table>

Times Viewed: 7

Leave a Reply

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