 |
 |
||
|
||
|
Sponsored by:
| Building Dynamic Menu Bars
Building Dynamic Menu Bars -- Source CodeSource Code for Demo #1
<HTML>
<HEAD>
<TITLE>Demo #1</TITLE>
<STYLE TYPE="text/css">
<!--
.menu { position:absolute;
visibility:hidden;
background-color: white;
color: black;
width: 80px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 2px;
font-size : 12px;
font-family: "arial", "helvetica";
font-weight: bold;
line-height: 16px;}
.menu A:hover {color: red;}
.menu A {text-decoration: none; color: black;}
-->
</STYLE>
<SCRIPT language="javascript">
//do browser detect stuff
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.all) && !isMacIE );
var activeMenu = 0;
function activateMenu(menuLayerRef, offset) {
if (isDynamic && activeMenu != menuLayerRef) {
if (activeMenu) hideMenu("menu" + activeMenu);
menuID = "menu" + menuLayerRef;
activeMenu = menuLayerRef;
if (isNS) {
document[menuID].top = 21;
document[menuID].left = offset;
} else {
document.all[menuID].style.pixelTop = 25;
document.all[menuID].style.pixelLeft = offset;
}
showMenu(menuID)
}
}
function showMenu(layerID) {
eval(layerRef + '["' + layerID + '"]' + styleRef + '.visibility = "visible"');
}
function hideMenu(layerID) {
eval(layerRef + '["' + layerID + '"]' + styleRef + '.visibility = "hidden"');
}
function killMenu(e) {
//check if theres a menu active
if (activeMenu) {
menuID = "menu" + activeMenu;
hideMenu(menuID);
activeMenu = 0;
}
}
function init() {
if (isDynamic) {
if (isNS) {document.captureEvents(Event.MOUSEUP);}
document.onmouseup = killMenu;
}
}
//This function is included just for demonstration
function popUp(moviePath, winName, xSize, Ysize) {
window.open(moviePath, winName, "width=" + xSize + ",height=" + Ysize + ",directories=no,status=no,scrollbars=no,resize=no,menubar=no,toolbar=no,alwaysRaised=yes" );
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFCC00" marginwidth="0" marginheight="0" topmargin="0"
leftmargin="0" onload="init();">
<script language="javascript1.2" src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fclickscript.htm&y=1999"></script>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH=110%>
<TR BGCOLOR="#000088">
<TD WIDTH="75">
<a href="javascript:popUp('menu1.htm', 'menu1', 150, 200)" onmouseover="activateMenu(1,13)" ><img src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fmenu1.GIF&y=1999" width="75" height="25" border=0></A>
</TD>
<TD WIDTH="75">
<a href="javascript:popUp('menu2.htm', 'menu2', 150, 200)" onmouseover="activateMenu(2,73)" ><img src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fmenu2.GIF&y=1999" width="75" height="25" border=0></A>
</TD>
<TD WIDTH="75">
<a href="javascript:popUp('menu3.htm', menu3', 150, 200)" onmouseover="activateMenu(3,146)" ><img src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fmenu3.GIF&y=1999" width="75" height="25" border=0></A>
</TD>
<TD WIDTH="110%" HEIGHT="25"> </TD>
</TR>
</TABLE>
<BLOCKQUOTE>
<FONT FACE="verdana,arial,helvetica">
<P>
In this demo, the menu bars will appear when you move your mouse over
either of the three menu options above. To make them disappear, click
elsewhere in the window.
</P>
<P>
The link options in the menus do not actually go anywhere; clicking on
them will only return an error message. The menu "options" are there
mainly for show.
</P>
</FONT>
</BLOCKQUOTE>
<P>
</BODY>
</HTML>
Source code for Demo #2
<HTML>
<HEAD>
<TITLE>Demo #2</TITLE>
<STYLE TYPE="text/css">
<!--
.menu { position:absolute;
visibility:hidden;
background-color: white;
color: black;
width: 80px;
height: auto;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 2px;
font-size : 12px;
font-family: "arial", "helvetica";
font-weight: bold;
line-height: 16px;}
.menu A:hover {color: red;}
.menu A {text-decoration: none; color: black;}
-->
</STYLE>
<SCRIPT language="javascript">
//do browser detect stuff
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.all) && !isMacIE );
var activeMenu = 0;
var finalClip;
function activateMenu(menuLayerRef, offset) {
if (isDynamic && activeMenu != menuLayerRef) {
if (activeMenu) hideMenu("menu" + activeMenu);
menuID = "menu" + menuLayerRef;
activeMenu = menuLayerRef;
if (isNS) {
document[menuID].top = 21;
document[menuID].left = offset;
} else {
document.all[menuID].style.pixelTop = 25;
document.all[menuID].style.pixelLeft = offset;
}
showMenu(menuID)
}
if (isDynamic && !isNS) window.event.cancelBubble = true;
}
function showMenu(layerID) {
eval(layerRef + '["' + layerID + '"]' + styleRef + '.visibility = "visible"');
}
function hideMenu(layerID) {
eval(layerRef + '["' + layerID + '"]' + styleRef + '.visibility = "hidden"');
}
function killMenu(e) {
//check if theres a menu active
if (activeMenu) {
menuID = "menu" + activeMenu;
if (isNS) {
menuX1 = document[menuID].left;
menuX2 = menuX1 + document[menuID].clip.right;
menuY1 = document[menuID].top;
menuY2 = menuY1 + document[menuID].clip.bottom;
if (e.pageX < menuX1 || e.pageX > menuX2 || e.pageY > menuY2) {
hideMenu(menuID);
activeMenu = 0;
}
} else {
hideMenu(menuID);
activeMenu = 0;
}
}
}
function init() {
if (isDynamic) {
if (isNS) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = killMenu;
} else {
document.onmouseover = killMenu;
}
}
}
//This function is included just for demonstration
function popUp(moviePath, winName, xSize, Ysize) {
window.open(moviePath, winName, "width=" + xSize + ",height=" + Ysize + ",directories=no,status=no,scrollbars=no,resize=no,menubar=no,toolbar=no,alwaysRaised=yes" );
}
</script>
</head>
<body bgcolor="#FFCC00" marginwidth="0" marginheight="0" topmargin="0"
leftmargin="0" onload="init();">
<script language="javascript1.2" src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Frollscript.htm&y=1999"></script>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="110%">
<TR BGCOLOR="#000000">
<TD WIDTH="75">
<a href="javascript:popUp('menu1.htm', 'menu1', 150, 200)" onmouseover="activateMenu(1,13)" ><img src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fmenu1.GIF&y=1999" width="75" height="25" border=0></A>
</TD>
<TD WIDTH="75">
<a href="javascript:popUp('menu2.htm', 'menu2', 150, 200)" onmouseover="activateMenu(2,73)" ><img src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fmenu2.GIF&y=1999" width="75" height="25" border=0></A>
</TD>
<TD WIDTH="75">
<a href="javascript:popUp('menu3.htm', 'menu3', 150, 200)" onmouseover="activateMenu(3,146)" ><img src="/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2Fmenu3.GIF&y=1999" width="75" height="25" border=0></A>
</TD>
<TD WIDTH="110%" HEIGHT="25"> </TD>
</TR>
</TABLE>
<BLOCKQUOTE>
<FONT FACE="verdana,arial,helvetica">
<P>
In this demo, the menu bars will appear when you move your mouse over
either of the three menu options above, and will disappear when you move
your mouse away.
</P>
<P>
The link options in the menus do not actually go anywhere; clicking on
them will only return an error message. The menu "options" are there
mainly for show.
</P>
</FONT>
</BLOCKQUOTE>
<P>
</BODY>
</HTML>
clickscript.htmif (isDynamic) {
document.write("<DIV id=\"menu1\" class=\"menu\"><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 1</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 2</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 3</A></DIV>");
document.write("<DIV id=\"menu2\" class=\"menu\"><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 1</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 2</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 3</A></DIV>");
document.write("<DIV id=\"menu3\" class=\"menu\"><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 1</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 2</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 3</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 4</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">Option</A></DIV>");
}
rollscript.htmif (isDynamic) {
document.write("<DIV id=\"menu1\" class=\"menu\"
onMouseover=\"activateMenu(1,13);\"><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 1</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 2</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 3</A></DIV>");
document.write("<DIV id=\"menu2\" class=\"menu\"
onMouseover=\"activateMenu(2,73);\"><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 1</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 2</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 3</A></DIV>");
document.write("<DIV id=\"menu3\" class=\"menu\"
onMouseover=\"activateMenu(3,146);\"><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 1</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 2</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 3</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">OPTION 4</A><BR><A
href=/old?u=http%3A%2F%2Fwebreview.com%2Fpub%2F98%2F07%2F24%2Fcoder%2F%5C&y=1999"nowhereyet.htm\">Option</A></DIV>");
}
Building Dynamic Menu Bars -- Source Code
|
|
|
|