Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to write dynamic menus with JS and hidden divs.

Menu Features

How to write dynamic menus with JS and hidden divs.

by Targol Posted Mar 12, 2003 (Edited Mar 12, 2003)

============================================================
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="javaScript">
var subMenus = new Array("sub_File", "sub_Edit", "sub_Display", "sub_Options");

function ShowMenu() {
  
  window.event.cancelBubble = true;

  var o_toolbarItem = window.event.srcElement;
  var divId = "sub_" + o_toolbarItem.id;

  for (var i=0;i<4;i++) {
    var o_TmpSubmenu = document.getElementById(subMenus[i]);
    if (o_TmpSubmenu.id == divId )
      o_TmpSubmenu.style.display = "block";
    else
      o_TmpSubmenu.style.display = "none";
  }
}

function HideMenus() {

  for (var i=0;i<4;i++) {
    var o_TmpSubmenu = document.getElementById(subMenus[i]);
    o_TmpSubmenu.style.display = "none";
  }
}

</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]8 )[/color] Add this event handler to your Body Tag :

Code:

<body onmouseover="HideMenus();">

[color green]7 )[/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.

Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Accept Learn more…

Back

Top