INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Menu Features

How to write dynamic menus with JS and hidden divs. by Targol
Posted: 12 Mar 03

============================================================
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

<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

.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="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>


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>

8 ) Add this event handler to your Body Tag :
<body onmouseover="HideMenus();">


7 ) 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.

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close