Cross Browser Drop-down Menus
8. Wrapping it up in ASP
If you have a dynamic web site, or if you're allergic to typing like me, you can wrap up these menus in ASP (presuming your server supports it) to save time.
The follwing code provides five ASP functions to build your menu system:
- start_menubar(width, colour, numMenus)
Starts the menu system, takes the following parameters
width the width of the whole menu bar
can be a number i.e. "200" or a percentage "80%"
colour background colour for the menu bar in Hexidecimal
i.e. "a0a0ff"
numMenus the number of drop-downs hanging from the bar
- end_menubar()
Closes the entire menu system. Needs to be called at the end
- start_menu(width, colour,menuNumber,url, label)
Starts a drop-down, takes the following parameters
width the width of the whole menu bar
can be a number i.e. "200" or a percentage "80%"
colour background colour for the menu bar in Hexidecimal
i.e. "a0a0ff"
menuNumber The number of the menu
url The the page the menu header links to if any
Otherwise put "#"
label The menu's label
- end_menu()
Closes off a drop-down
- menu_item(name, onColour,offColour, label, url)
An item in the drop-down, takes the following parameters
name a unique identifier for the menu-item
onColour background colour when the mouse is over it
offColour background colour at other times
label The menu's label
url The the page the menu header links to if any
Otherwise put "#"
Here's the code for the functions:
<%function start_menubar(width, colour, numMenus)%>
<script language="Javascript">
<!--
numMenus = <%=numMenus%>;
//-->
</script>
<table width="<%=width%>" bgcolor="#<%=colour%>" cellpadding="0" cellspacing="0" border="0">
<tr height="20">
<%end function
Function end_menubar()%>
</tr>
</table>
<%End Function
Function start_menu(width, colour,menuNumber,url, label)%>
<td align="left" valign="middle" width="<%=width%>" height="20">
<div id="label<%=menuNumber%>"><img src="images/shim.gif" width="5" height="10" border="0" name="img<%=menuNumber%>"><a href="<%=url%>" class="MenuHeader" onMouseover="return !showMenu('<%=menuNumber%>', event, 'label<%=menuNumber%>'); menuOver('rollimg2');" onMouseOut = "window.status='';return true;"><b><%=label%></b> <img src="images/close_menu.gif" border="0"><img src="images/open_menu.gif" border="0"></a></div>
<div id="menu<%=menuNumber%>" style="width: 150px; height: 52px; position:absolute; z-index:1; visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
<table cellspacing="0" cellpadding="0" width="200"><tr><td bgcolor="#<%=colour%>" width="100%">
<table border=0 cellpadding=2 cellspacing=0 width="100%">
<%End Function
Function menu_item(name, onColour,offColour, label, url)%>
<tr id="<%=name%>" bgcolor="#<%=offColour%>"><td onMouseover="this.style.backgroundColor = '#<%=onColour%>';" onMouseout = "this.style.backgroundColor = '#<%=offColour%>';" width="100%" class="MenuBox"><a class="MenuItem" href="<%=url%>" onMouseOut="menuOut('rollimg2');" onMouseOver="menuOver('rollimg2');"><img src="images/shim.gif" width="5" height="2" border="0"><%=label%></a></td></tr>
<%end Function
Function end_menu()%>
</table>
</td></tr></table>
</div>
</td>
<%End Function%>
The following code calls the functions to display the menus:
You'll need the following two files as well:
menu.js & standard.css
<script language=JavaScript src="menu.js">
</script>
<link rel="stylesheet" href="standard.css">
<%=start_menubar("450","800000", "3")%>
<%=start_menu ("33%","800000", "1", "#", "Menu One")%>
<%=menu_item ("1a", "800000", "a03333", "Item 1a", "#")%>
<%=menu_item ("1b", "800000", "a03333", "Item 1b", "#")%>
<%=menu_item ("1c", "800000", "a03333", "Item 1c", "#")%>
<%=end_menu%>
<%=start_menu ("33%","800000", "2", "#", "Menu Two")%>
<%=menu_item ("2a", "800000", "a03333", "Item 2a", "#")%>
<%=menu_item ("2b", "800000", "a03333", "Item 2b", "#")%>
<%=menu_item ("2c", "800000", "a03333", "Item 2c", "#")%>
<%=end_menu%>
<%=start_menu ("33%","800000", "3", "#", "Menu Three")%>
<%=menu_item ("3a", "800000", "a03333", "Item 3a", "#")%>
<%=menu_item ("3b", "800000", "a03333", "Item 3b", "#")%>
<%=menu_item ("3c", "800000", "a03333", "Item 3c", "#")%>
<%=end_menu%>
<%=end_menubar%>
I hope you found this tutorial useful, if you did, let me know.
|
