 Inside Technique : IE Menu Toolkit : Coming Together
This page demonstrates what you need to do in your web page to display the menu:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
/* Define the style sheet for the menu bar */
#menubar {position: relative; font: menu; cursor: default; background: lightgrey ; }
/* Style for the top-level menu items */
#menubar .root {border: 1px lightgrey solid; padding-left: 2pt; padding-right: 2pt}
/* Style for nested menus */
#menubar TABLE {font: menu; margin: 0pt; padding: 0pt; background: lightgrey; border-left: 2px #EEEEEE solid; border-right: 2px gray solid; border-bottom: 2px gray solid; border-top: 2px #EEEEEE solid; display: none; position: absolute}
#menubar TABLE TD {padding-top: 2pt; padding-bottom: 2pt; padding-left: 12pt; padding-right: 15pt; margin: 0pt}
/* Style for highlighted elements */
#menubar .highlight {color: white; background: navy}
/* Style for highlighting disabled elements */
#menubar .disabledhighlight {background: navy; color: gray}
/* Style for disabled and break elements */
#menubar #break, #menubar .disabled {color: gray}
/* Remove padding and margins for break elements (horizontal bars) */
#menubar #break {padding: 0pt; margin: 0pt}
/* Style for the arrow representing more choices */
#menubar .more {font: 9pt webdings; position: relative; height: 9pt; left: 14pt; top: -2pt; margin: 0pt; padding: 0pt;float: right; width: .8em}
#menubar .left {margin-left: -11pt}
/* Used for the color picker sub-menu */
#colors TD {width: 10pt; height: 10pt; font-size: 1pt; padding: 0pt; margin: 0pt}
UL {font: 10pt verdana}
</STYLE>
<!-- Associate the library with the page -->
<SCRIPT SRC="menuBar.js" LANGUAGE="JavaScript"></SCRIPT>
</HEAD>
<BODY>
<TABLE ID=menuBar ONSELECTSTART="return false" ONCLICK="processClick()" ONMOUSEOVER="doHighlight(event.toElement)" ONMOUSEOUT="doCheckOut()" ONKEYDOWN="processKey()">
<!-- class=root is required on all top level table cells to identify each drop-down menu.
The title is optional and can be added to any menu choice to add a tooltip.
-->
<TR><TD class=root TITLE="This is a sample navigation menu">Go
<!-- By nesting a table below a menu choice, you create the menu hierarchy.
Below are the choices for the "Go" menu
-->
<TABLE CELLSPACING=0 CELLPADDING=0>
<!-- Each menu option can also contain rich HTML -->
<TR><TD NOWRAP><EM>Home</EM></TD></TR>
<!-- The ID=break is required whenever a disabled horizontal bar is required -->
<TR><TD ID=break NOWRAP><HR></TD></TR>
<!-- A 4 is created using the SPAN element defined below.
The set of nested options is specified by nesting another table.
Due to HTML formatting rules, the <TABLE> tag is defined on the same line in the
source as as the current option. Moving the <TABLE> definition onto the following
line causes the menu to slightly resize itself when nested choices are displayed.
-->
<TR><TD NOWRAP><SPAN class=more>4</span>Features<TABLE CELLSPACING=0 CELLPADDING=0>
<TR><TD NOWRAP><IMG SRC="/gifs/inside.jpg" align=middle width=10 height=15 style="margin-left: -11pt">Book Information</TD></TR>
<TR><TD NOWRAP>Discussion Forum</TD></TR>
<TR><TD NOWRAP>Fun and Games</TD></TR>
<TR><TD NOWRAP>The 10K Demo</TD></TR>
<TR><TD NOWRAP>XML Online</TD></TR>
<TR><TD NOWRAP>CSS Online</TD></TR>
</TABLE>
<TR><TD NOWRAP><SPAN class=more>4</span>Developers Paradise<TABLE CELLSPACING=0 CELLPADDING=0>
<TR><TD NOWRAP>Positioning Library</TD></TR>
<TR><TD NOWRAP>Inside Techniques</TD></TR>
<TR><TD NOWRAP>Inside Scriptlets</TD></TR>
<TR><TD NOWRAP>DHTML Toolkits</TD></TR>
</TABLE>
</TD></TR><TABLE>
<TD class=root CELLSPACING=0 CELLPADDING=0 nowrap TITLE="You can set foreground and background colors.">Colors
<!-- Since tables are used to define the menu, both horizontal and vertical sub-menus can be defined -->
<TABLE CELLSPACING=0 CELLPADDING=0>
<TR><TD NOWRAP><SPAN class=more>4</span>Background<TABLE ONCLICK="setColor(false)" CELLSPACING=0 CELLPADDING=0 border ID=colors>
<TR><TD BGCOLOR=red> <TD BGCOLOR=blue> <TD BGCOLOR=green> <TD BGCOLOR=white>
<TR><TD BGCOLOR=black> <TD BGCOLOR=purple> >TD BGCOLOR=orange< <TD BGCOLOR=gray>
</TR></TABLE>
<TR><TD NOWRAP><SPAN class=more>4</span>Background<TABLE NCLICK="setColor(true)" CELLSPACING=0 CELLPADDING=0 border ID=colors>
<TR><TD BGCOLOR=red> <TD BGCOLOR=blue> <TD BGCOLOR=green> <TD BGCOLOR=white>
<TR><TD BGCOLOR=black> <TD BGCOLOR=purple> >TD BGCOLOR=orange< <TD BGCOLOR=gray>
</TR></TABLE>
</TR></TABLE>
</TD>
<!-- The following is a special cell that is used to extend the background to the right edge -->
<TD WIDTH=100% class=clear>
</TD></TR>
</TABLE>
You have seen how to manually define and create menus. Our
Menu Toolkit WizardIE4
helps you through the process.
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.
| 