============================================================
OBJECT : Writing a DHTML Menu with hidden DIVS
KEYWORDS : dynamic, menu, menuitem, hidden, div
============================================================
[color blue]What ?[/color]
The main object of this FAQ is to create a menu toolbar within a web page.
below is a sample of tooblar menu
Code:
_____ _____ _____ _____
| a | b | c | d |
|_____|_____|_____|_____|
Where a, b, c, and d are the menuitems.
The behavior of this menu will be : when mouse passes over a menuitem, the corresponding submenu will appear with links or buttons in it this way :
Code:
_____ _____ _____ _____
| a | b | c | d |
|_____|_____|_____|_____|
| item 1 |
| item 2 |
| item 3 |
| item 4 |
| item 5 |
|_________|
Passing over another menuitem will hide current viewed menu to show the one corresponding to the new one. Leaving submenu or menu toolbar with mouse cursor will hide all submenus.
[color blue]How to ? - first part : structure[/color]
[color green]1 )[/color] Create your toolbar on your page. Each "toolbar item" will be given an unique id. example :
Code:
<Table>
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<tbody>
<TR>
<TD id="File">File</TD>
<TD id="Edit">Edit</TD>
<TD id="Display">Display</TD>
<TD id="Options">Options</TD>
</TR>
</tbody>
</TABLE>
[color green]2 )[/color] For each submenu, create an absolute positionned DIV that you'll initially set visible to place it on the page just where you want beneath the toolbar. Each div will have an unique id too with value set to "sub_" concatened with it's corresponding toolbar item id. Exemple :
HTML code
Code:
<Div id="sub_File" class="subMenuDiv" style="top : 40px; left: 13px">sub_File</div>
<Div id="sub_Edit" class="subMenuDiv" style="top : 40px; left: 119px">sub_Edit</Div>
<Div id="sub_Display" class="subMenuDiv" style="top : 40px; left: 225px">sub_Display</Div>
<Div id="sub_Options" class="subMenuDiv" style="top : 40px; left: 331px">sub_Options</Div>
CSS code
Code:
.subMenuDiv {
border : solid 1px;
position : absolute;
display : block;
width : 200px;
height : 220px;
overflow : hidden;
text-align : left;
z-index : 200;
}
Note : display and border attributes are set to place correctly the divs.
[color green]3 )[/color] Fill each div with the links, buttons or what ever you want to put in (adapt width and heigth to the content or set overflow attribute to "auto" to let your browser show a scrollbar if needed).
[color green]4 )[/color] Once well placed, hide all your divs by setting their style to "display: none;" in CSS "subMenuDiv" class. If you want, you can also hide their borders by removing the corresponding line.
[color blue]How to ? - second part : events handling[/color]
[color green]5 )[/color] Add this script to your page :
Code:
<Script Language="VbScript">
dim subMenus(4)
subMenus(1) = "sub_File"
subMenus(2) = "sub_Edit"
subMenus(3) = "sub_Display"
subMenus(4) = "sub_Options"
function ShowMenu()
dim o_toolbarItem, divId, i, o_TmpSubmenu
set o_toolbarItem = window.event.srcElement
window.event.cancelBubble = true
divId = "sub_" & o_toolbarItem.id
for i = 1 to 4
set o_TmpSubmenu = document.getElementById(subMenus(i))
if o_TmpSubmenu.id = divId Then
o_TmpSubmenu.style.display = "block"
Else
o_TmpSubmenu.style.display = "none"
End if
next
End function
function HideMenus()
dim i, o_TmpSubmenu
for i = 1 to 4
set o_TmpSubmenu = document.getElementById(subMenus(i))
o_TmpSubmenu.style.display = "none"
next
End function
</Script>
[color green]6 )[/color] add the call to ShowMenu in all your toolbar items :
Code:
<Table border="1px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<tbody>
<TR>
<TD id="File" onmouseover="ShowMenu">File</TD>
<TD id="Edit" onmouseover="ShowMenu">Edit</TD>
<TD id="Display" onmouseover="ShowMenu">Display</TD>
<TD id="Options" onmouseover="ShowMenu">Options</TD>
</TR>
</tbody>
</Table>
[color green]7 )[/color] Add this event handler to your Body Tag :
Code:
<body onmouseover="HideMenus">
[color green]8 )[/color] Add this event handler to all your submenu divs to avoid them being hidden when mouse is over them :
Code:
<Div id="sub_File" class="subMenuDiv" onmouseover="window.event.cancelBubble = true" style="top : 40px; left: 13px">sub_File</div>
<Div id="sub_Edit" class="subMenuDiv" onmouseover="window.event.cancelBubble = true" style="top : 40px; left: 119px">sub_Edit</Div>
<Div id="sub_Display" class="subMenuDiv" onmouseover="window.event.cancelBubble = true" style="top : 40px; left: 225px">sub_Display</Div>
<Div id="sub_Options" class="subMenuDiv" onmouseover="window.event.cancelBubble = true" style="top : 40px; left: 331px">sub_Options</Div>
NOTE : Beware : don't let a single pixel between your menuitems <TD>'s bottom and your submenu <DIV>'s top. This single line of pixel will lead your submenu to disapear before you can click anything on them.
