| home / experts / dhtml / column24 |    |
|
The three menus that appear when we click on the menu bar are simple positioned elements. The HTML for all three is identical, except for the ID and the number of menu item SPAN elements. The code below is for the first menu, with three items:
   | <DIV ID=menu1
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
</DIV>
|
Since the menus are 3D objects, they have an outset border with a threedhighlight color value. Their background color is menu and the contained text color is menutext.
The non-positioned SPANs that define the menu items have onMouseOver and onMouseOut event handlers, to help create the rollover effect. When the user mouses over an item, the item's background color changes to highlight, and the text color to highlighttext. When the user leaves the item, it returns to its normal menu/menutext colors. A simple rollover that mimics the OS menu rollovers exactly.
Each menu item span can also have an onClick handler, pointing to a function that will be executed when the user clicks, that is, selects, the menu item. In our example nothing happens, but the onClick handler has been included for reference.
The menus also have z-index value of 10. This has been included to ensure that the menus exist in a space above all other elements, and therefore cover them, in the dialog. Just in case one wants to insert some custom HTML later, the z-index will always place the menus above.
The menus are originally hidden, of course, so they do not appear in our usual screenshot, below left. But, they are there!
 | <DIV ID=popup1
STYLE="position:absolute;
visibility:hidden;
left:240;top:300;
width:212px;height:180;
border:2px threedhighlight outset;
background-color:threedface;
font-family:MS Sans Serif;font-size:8pt;
cursor:default"
onSelectStart="return false"
onMouseDown="makeActive(this)">
<DIV
STYLE="position:absolute;
left:0;top:0;
width:100%;height:100%;
border:1px inactiveborder solid">
</DIV>
<DIV
STYLE="position:absolute;
left:2;top:2;
width:204px;height:18px;
background-color:inactivecaption;
color:inactivecaptiontext;
font-family:MS Sans Serif;
font-size:9pt;font-weight:bold;
padding:2px"
onMouseDown="grabEl(this.offsetParent)">
<IMG SRC="x.gif"
WIDTH=12 HEIGHT=10 HSPACE=0 BORDER=0 ALIGN=RIGHT
STYLE="background-color:buttonface;
border:2px buttonhighlight outset;"
onMouseDown="xPress(this,1)"
onMouseUp="xPress(this,0)">
<IMG SRC="wr.gif"
WIDTH=20 HEIGHT=11 BORDER=0 VSPACE=1
ALIGN=ABSMIDDLE>
DHTML Popup Element 1
</DIV>
<DIV
STYLE="position:absolute;
left:2;top:21;
width:204px;height:18px;
background-color:menu;
color:menutext;
font-family:MS Sans Serif;font-size:8pt;">
<SPAN ID="span1"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu1 </SPAN>
<SPAN ID="span2"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu2 </SPAN>
<SPAN ID="span3"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu3 </SPAN>
</DIV>
<HR
STYLE="position:absolute;top:40;width:100%">
<DIV ID=menu1
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
</DIV>
<DIV ID=menu2
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
</DIV>
<DIV ID=menu3
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 4</SPAN><BR>
</DIV>
</DIV> |
Now, let's finish the HTML for the dialogs.
|
|
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Feb 23, 1999
Revised: Feb 23, 1999
URL: http://www.webreference.com/dhtml/column24/colsIEexample6.html
