Printable View
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
Have a look at
http://www.bratta.com/dhtml/scripts.asp
This isn't exactly as Microsoft use, but it works:
I would suggest you put the javascript and style into .js and .css files and link them to your page.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>
Hope this helps :cool:
Thanks a lot, that helps.
Srini
Thanks Mr. Grant. I'll tuck that away for later.
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).