Cross-Browser Dynamic HTML Menus javascript

En esta rutina encontraremos una colección de distintos tipos de menues dhtml, la verdad son todos muy buenos.

Código Javascript


<HTML>
<HEAD>
<TITLE>Ejemplo de los distintos tipos de Menúes</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="ejemplos/menu.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function onLoad() {
	loadMenus();
}
function loadMenus() {
    //Dynamic Menus
    window.myMenu = new Menu();
    myMenu.addMenuItem("my menu item A");
    myMenu.addMenuItem("my menu item B");
    myMenu.addMenuItem("my menu item C");
    myMenu.addMenuItem("my menu item D");
    window.myMenu2 = new Menu("Example 2");
    myMenu2.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    myMenu2.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    myMenu2.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    myMenu2.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    window.myMenu3 = new Menu("Colors");
    myMenu3.addMenuItem("Red", "document.bgColor='red'");
    myMenu3.addMenuItem("Green", "document.bgColor='green'");
    myMenu3.addMenuItem("Blue", "document.bgColor='blue'");
    myMenu3.addMenuItem("White", "document.bgColor='white'");
    myMenu3.menuHiliteBgColor = "#6699CC";
    window.myMenu4 = new Menu("Example 4");
    myMenu4.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    myMenu4.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    myMenu4.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    myMenu4.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    myMenu4.menuItemBgColor = "yellow";
    myMenu4.fontColor = "blue";
    window.myMenu5 = new Menu("Example 5");
    myMenu5.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    myMenu5.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    myMenu5.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    myMenu5.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    myMenu5.menuItemBgColor = "#8B0000";
    myMenu5.menuHiliteBgColor = "#000084";
    myMenu5.menuItemHeight = 25;
    myMenu5.fontSize = 18;
    myMenu5.fontWeight = "Bold";
    myMenu5.fontColor = "white";
    myMenu5.bgColor = "#CDB79E";
    window.myMenu6 = new Menu("Example 6");
    myMenu6.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    myMenu6.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    myMenu6.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    myMenu6.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    window.mySubMenu7 = new Menu("JavaScript");
    mySubMenu7.addMenuItem("JavaScript 1.0", "top.window.location='http://developer.netscape.com'");
    mySubMenu7.addMenuItem("JavaScript 1.1", "top.window.location='http://developer.netscape.com'");
    mySubMenu7.addMenuItem("JavaScript 1.2", "top.window.location='http://developer.netscape.com'");
    mySubMenu7.menuHiliteBgColor = "pink";
    window.myMenu7 = new Menu("Technologies");
    myMenu7.addMenuItem("Dynamic HTML", "top.window.location='http://developer.netscape.com'");
    myMenu7.addMenuItem("Java", "top.window.location='http://home.netscape.com'");
    myMenu7.addMenuItem(mySubMenu7);
    myMenu7.addMenuItem("Plug-ins", "top.window.location='http://home.netscape.com'");
    window.myMenu8 = new Menu("Example 8");
    myMenu8.addMenuItem(myMenu2);
    myMenu8.addMenuItem(myMenu3);
    myMenu8.addMenuItem(myMenu4);
    myMenu8.addMenuItem(myMenu5);
    myMenu8.addMenuItem(myMenu7);
    window.mozilla = new Menu("Mozilla");
    mozilla.addMenuItem("Mozilla.org", "top.window.location='http://www.mozilla.org'");
    mozilla.addMenuItem("Projects", "http://www.mozilla.org/projects.html'");
    mozilla.addMenuItem("Source Code", "top.window.location='http://www.mozilla.org/source-code.html'");
    mozilla.menuHiliteBgColor = "red";
    window.search = new Menu("Search");
    search.addMenuItem("Net Search", "top.window.location='http://home.netscape.com/escapes/search'");
    search.addMenuItem("Excite", "top.window.location='http://www.excite.com'");
    search.addMenuItem("Infoseek", "top.window.location='http://www.infoseek.com'");
    search.addMenuItem("Lycos", "top.window.location='http://www.lycos.com'");
    search.addMenuItem("Yahoo", "top.window.location='http://www.yahoo.com'");
    search.menuHiliteBgColor = "yellow";
    window.mBlack = new Menu("Black");
    mBlack.addMenuItem("Technical Manuals", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=/docs/manuals/doclist.html'");
    mBlack.addMenuItem("Sample Code", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=/docs/examples/examples.html'");
    mBlack.addMenuItem("White Papers", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=/docs/wpapers/wpapers.html'");
    mBlack.addMenuItem("TechNotes", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=/docs/technote/tn.html'");
    mBlack.addMenuItem("Articles", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=/docs/articles/articles.html'");
    mBlack.addMenuItem("Third-Party Books", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=http://www.amazon.com/netscape-devedge/'");
    mBlack.addMenuItem("Presentations", "top.window.location='http://developer.netscape.com/openstudio/docs/index_frame.html?content=/docs/presentations/presentations.html'");
    mBlack.fontColor = "#ffffff";
    mBlack.bgColor = "#AAAAAA";
    mBlack.menuItemBgColor = "#000000";
    mBlack.menuHiliteBgColor = "#6699CC";
    window.mWhite = new Menu("White");
    mWhite.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    mWhite.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    mWhite.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    mWhite.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    mWhite.fontColor = "blue";
    mWhite.bgColor = "#dddddd";
    mWhite.menuItemBgColor = "white";
    mWhite.menuHiliteBgColor = "#eeeeee";
    window.mBigBorders = new Menu("Big Borders");
    mBigBorders.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    mBigBorders.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    mBigBorders.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    mBigBorders.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    mBigBorders.menuHiliteBgColor = "#6699CC";
    mBigBorders.menuItemHeight = 25;
    mBigBorders.fontSize = 20;
    mBigBorders.fontWeight = "Bold";
    mBigBorders.menuBorder = 4;
    mBigBorders.menuItemBorder = 5;
    window.mNoBorders = new Menu("No Borders");
    mNoBorders.addMenuItem("DevEdge Online", "top.window.location='http://developer.netscape.com'");
    mNoBorders.addMenuItem("View Source", "top.window.location='http://developer.netscape.com/viewsource/'");
    mNoBorders.addMenuItem("Netcenter", "top.window.location='http://home.netscape.com'");
    mNoBorders.addMenuItem("Download", "top.window.location='http://home.netscape.com/download/'");
    mNoBorders.menuItemBorder = 0;
	myMenu.writeMenus();
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<center><H2>Ejemplo de los distintos tipos de Menúes</H2>
<H3>Dynamic HTML Menus -- Usando el JavaScript Menu Component</H3>
<P>
Para lograr que funcione este menú, necesitas el siguiente archivo:
<A HREF="ejemplos/menu.js">Menu.js</A> 

 <P><LI>Distintos ejemplos:
<TABLE>
<TR>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.myMenu);" onMouseOver="window.showMenu(window.myMenu);">myMenu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.myMenu3);" onMouseOver="window.showMenu(window.myMenu3);">Colors Menu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.myMenu4);" onMouseOver="window.showMenu(window.myMenu4);">Yellow/Blue Menu</A>
  </TD>
</TR>
<TR>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.myMenu8);" onMouseOver="window.showMenu(window.myMenu8);">Submenus</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.myMenu7);" onMouseOver="window.showMenu(window.myMenu7);">Technologies Menu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.mySubMenu7);" onMouseOver="window.showMenu(window.mySubMenu7);">JavaScript Menu</A>
  </TD>
</TR>
<TR>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.myMenu5);" onMouseOver="window.showMenu(window.myMenu5);">Brick-Red Menu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.mozilla);" onMouseOver="window.showMenu(window.mozilla);">Mozilla Menu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.search);" onMouseOver="window.showMenu(window.search);">Search Menu</A>
  </TD>
</TR>
<TR>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.mBigBorders);" onMouseOver="window.showMenu(window.mBigBorders);">Big-Borders Menu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.mBlack);" onMouseOver="window.showMenu(window.mBlack);">Black Menu</A>
  </TD>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.mWhite);" onMouseOver="window.showMenu(window.mWhite);">White Menu</A>
  </TD>
</TR>
<TR>
  <TD VALIGN=TOP NOWRAP>
    <LI><A HREF="javascript:window.showMenu(window.mNoBorders);" onMouseOver="window.showMenu(window.mNoBorders);">No-Borders Menu</A>
  </TD>
</TR>
</TABLE>
</UL>
<br>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
//For IE
if (document.all) {
    loadMenus();
}
//-->
</SCRIPT>
</BODY>
</HTML>
Ver ejemplo Javascript en funcionamiento