Menus in JavaScript

**Srinimusuku** · Mar 19th, 2001, 12:07 AM

Hi all,
When i visit the site WWW.MICROSOFT.COM, i see the following headings on the top.
*********************************************
Home | Events/Training | Subscribe | About Microsoft | US/Worldwide | Downloads | Contact Us | MSN.com
*********************************************
and when i move the mouse over the above words, i see that a drop down menu appears.
Can i know the Javascript code to do this kind of functionality.
Thanks in advance.
Srini

**Mark Sreeves** · Mar 19th, 2001, 04:07 AM

Have a look at
http://www.bratta.com/dhtml/scripts.asp

**Jerry Grant** · Mar 20th, 2001, 04:49 AM

This isn't exactly as Microsoft use, but it works:

Code:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Menu Demo</TITLE>
<STYLE type="text/css">
<!--
BODY
{
    FONT-SIZE: 70%;
    FONT-FAMILY: Tahoma, verdana;
    BACKGROUND-COLOR: white
}
DIV#divMenuBar
{
    BACKGROUND-COLOR: navy
}
TABLE#tblMenuBar TD
{
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    FONT-SIZE: 60%;
    PADDING-BOTTOM: 0px;
    CURSOR: default;
    COLOR: white;
    PADDING-TOP: 0px
}
TABLE#tblMenuBar TD.clsMenuBarItem
{
    FONT-WEIGHT: bold;
    CURSOR: hand
}
DIV.clsMenu
{
    PADDING-RIGHT: 5px;
    BORDER-TOP: white 1px solid;
    PADDING-LEFT: 8px;
    FONT-SIZE: 90%;
    VISIBILITY: hidden;
    PADDING-BOTTOM: 5px;
    WIDTH: 220px;
    PADDING-TOP: 5px;
    POSITION: absolute;
    BACKGROUND-COLOR: navy
}
DIV.clsMenu A
{
    FONT-WEIGHT: bold;
    COLOR: white;
    TEXT-DECORATION: none
}
DIV.clsMenu A:hover
{
    FONT-WEIGHT: bold;
    COLOR: moccasin
}
-->
</STYLE>
<SCRIPT language="Javascript">
<!--
	var eOpenMenu = null;

	function OpenMenu(eSrc,eMenu)
	{
		eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
		eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
		eMenu.style.visibility = "visible";
		eOpenMenu = eMenu;
	}

	function CloseMenu(eMenu)
	{
		eMenu.style.visibility = "hidden";
		eOpenMenu = null;
	}

	function document.onmouseover()
	{
		var eSrc = window.event.srcElement;
		if ("clsMenuBarItem" == eSrc.className)
		{
			eSrc.style.color = "moccasin"; 
			var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
			if (eOpenMenu && eOpenMenu != eMenu) 
			{
				CloseMenu(eOpenMenu);
			}
			if (eMenu) 
			{
				OpenMenu(eSrc,eMenu);
			}
		}
		else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)) 
		{
			CloseMenu(eOpenMenu);
		}
	}
	
	function document.onmouseout()
	{
		var eSrc = window.event.srcElement;
		if ("clsMenuBarItem" == eSrc.className)
		{
			eSrc.style.color = ""; 
		}
	}	
-->
</SCRIPT>
</HEAD>
<BODY>
	<DIV ID="divMenuBar">
	<TABLE ID="tblMenuBar" BORDER="0">
	<TR>
		<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemFirst">First</TD>
		<TD>|</TD>
		<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemSecond">Second</TD>
		<TD>|</TD>
		<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemThird">Third</TD>
	</TR>
	</TABLE>
	</DIV>
	
	<DIV CLASS="clsMenu" ID="divMenuFirst">
		<DIV CLASS="clsMenuSpacer"></DIV>
		<DIV><A HREF="#">Item 1 in First</A></DIV>
		<DIV><A HREF="#">Item 2 in First</A></DIV>
		<DIV><A HREF="#">Item 3 in First</A></DIV>
		<DIV><A HREF="#">Item 4 in First</A></DIV>
	</DIV>
	<DIV CLASS="clsMenu" ID="divMenuSecond">
		<DIV CLASS="clsMenuSpacer"></DIV>
		<DIV><A HREF="#">Item 1 in Second</A></DIV>
		<DIV><A HREF="#">Item 2 in Second</A></DIV>
		<DIV><A HREF="#">Item 3 in Second</A></DIV>
		<DIV><A HREF="#">Item 4 in Second</A></DIV>
	</DIV>
	<DIV CLASS="clsMenu" ID="divMenuThird">
		<DIV CLASS="clsMenuSpacer"></DIV>
		<DIV><A HREF="#">Item 1 in Third</A></DIV>
		<DIV><A HREF="#">Item 2 in Third</A></DIV>
		<DIV><A HREF="#">Item 3 in Third</A></DIV>
		<DIV><A HREF="#">Item 4 in Third</A></DIV>
	</DIV>

</BODY>
</HTML>

I would suggest you put the javascript and style into .js and .css files and link them to your page.
Hope this helps

**Srinimusuku** · Mar 20th, 2001, 10:26 AM

Thanks a lot, that helps.
Srini

**Kagey** · Mar 20th, 2001, 04:34 PM

Thanks Mr. Grant. I'll tuck that away for later.

**chrismitchell** · Mar 21st, 2001, 04:15 AM

try this link below.. It is a very easy to maintain set of JavaScript buttons.

http://developer.netscape.com/viewso...ith_menu2.html

I have used these alot though they don't work in frames without another JavaScript code (that is in the same place).

Thread: Menus in JavaScript

Thread Tools

Display

Thanks

Posting Permissions