Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Pop Goes the Menu  : Page 3

With a few stylesheet rules, some JavaScript mouse-tracking and positioning code, and a DHTML-capable browser, you can create pop-up menus that make your Web applications easier to use.


Write the Code
Now you can write some code. Menu systems really only do three things:

   1. Show the appropriate menu when the mouse enters a trigger
   2. Hide any other menu
   3. Keep track of which menu is currently visible

One way to translate the preceding pseudo-code into JavaScript is:

   var mnuSelected = '';
   function showMenu(menu){
   document.getElementById(menu).style.visibility = 'visible';
   mnuSelected = menu;
   function hideMenu(menu){
      document.getElementById(menu).style.visibility = 'hidden';

The mnuSelected variable keeps track of the current menu while the two functions show or hide the respective menu. That was pretty simple! The only thing left to do in code is the positioning.

To center things on the screen youll need the available width of the window. Unfortunately, IE5 and NS6 do this differently so youll have to fork the logic. IE5 uses the proprietary document.body.clientWidth while NS6 uses the W3C standard innerWidth property of the window object. Since IE5 uses a property of the document, youll have to wait until the document is loaded before gaining access to it. That also means that youll have to wait until the document loads before positioning the menus. The onLoad event of the <body> element triggers an init function that performs the positioning tasks:

   function init(){
      aWidth = document.body.clientWidth;
      document.getElementById('menuBar').style.width = aWidth;
      aWidth = innerWidth;
      document.getElementById('menuBar').style.width = aWidth-8;
   document.getElementById('About').style.left = parseInt((aWidth/2 - 200));
   document.getElementById('Services').style.left = parseInt((aWidth/2 - 100));
   document.getElementById('Samples').style.left = parseInt(aWidth/2);
   document.getElementById('Contact').style.left = parseInt((aWidth/2 + 100));
   document.getElementById('mnuAbout').style.left = 
   document.getElementById('mnuServices').style.left = 
   document.getElementById('mnuSamples').style.left = 
   document.getElementById('mnuContact').style.left = 

The if(document.all) test differentiates between IE5 and NS6. The expression evaluates to true for IE5 but fails for NS6. Notice that the code sets the width of the menuBar element differently depending on the browser type. In my informal testing, NS6 will include that annoying side bars border in the value returned for innerWidth. Interestingly, it doesnt matter what size a user makes the side bar, as that area is not included in the innerWidth property value. In any event, if you dont subtract out a few pixels youll get a horizontal scroll bar across the bottom of the page. On my system, eight pixels seemed to be the magic number.

Also notice that I hard coded the positions of the menu triggers; however to make the code more generic, you could create a variable for the number of menus and get the left values based on the particular menu and its position in the queue. For this simple example though, I wanted the code to be as readable as I could make it.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.