============================================================ OBJECT : Writing a DHTML Menu with hidden DIVS KEYWORDS : dynamic, menu, menuitem, hidden, div ============================================================
What ? The main object of this FAQ is to create a menu toolbar within a web page.
below is a sample of tooblar menu
_____ _____ _____ _____ | 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 :
_____ _____ _____ _____ | 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.
How to ? - first part : structure
1 ) Create your toolbar on your page. Each "toolbar item" will be given an unique id. example : <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>
2 ) 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
.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.
3 ) 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).
4 ) 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.
How to ? - second part : events handling 5 ) Add this script to your page : <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>
6 ) add the call to ShowMenu in all your toolbar items : <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>
7 ) Add this event handler to your Body Tag : <body onmouseover="HideMenus">
8 ) Add this event handler to all your submenu divs to avoid them being hidden when mouse is over them : <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.
Talk To Other Members