interactive design 1 - med m/512 - fall 2005
Philip van Allen - v a n a l l e n @ a r t c e n t e r . e d u
room 228, wednesday 1:00pm-5:00pm
all materials on this web site © copyright 2005, Philip van Allen
 
week 10b - sophisticated page layout, pop-out menus

making pop-out : 
menus : 

 



introduction : 


Many web sites now use a system of pop-out menus in their navigation systems. The pop-out menus provide several links, and display when the user mouses over a navigation category. A simple example of this can be seen on this page:

pop-out example

Usually, pop-out menus are created with layers, using JavaScript to show and hide the layers. The trick is managing how the pop-out layers show and hide at the appropriate times. For example, you want the pop-out to disappear if the user doesn't make any selection. These are the actions that have to be accommodated in pop-out menues:

  • show the pop-out layer on mouseOver of nav link
  • hide the pop-out layer if the user moves to another nav link
  • keep the pop-out layer visible on mouseOver of the sub-nav links in the pop-out
  • hide the pop-out layer after a delay on mouseOut of the pop-out - the delay is important so if the user accidentally mouses off, the menu doesn't disappear immediately.

 

 
procedure :  for creating Pop-out menus with Behaviors and custom JavaScript

  
set up the document : 
  • Turn off Dreamweaver's Visual Aids so the yellow icons do not interfere with positioning of graphics and layers.
  • Set the document to have no margins (in MODIFY>PAGE PROPERTIES) so the layers will line up properly with images in the background.
  • Create and place graphics for each navigation link. Make these graphics into links using the "#" so you can add behaviors later.
  • Create a layer for each nav link's pop-out, positioning it in the location where it should appear.
  • Name each layer
  • Place sub-nav links (graphics or plain text) into the new pop-out layers.

 

  
install the custom timer : 
JavaScript code : 

The below timer code is used to create an action that hides any visible pop-out after the user mouses away from the navigation system. A delay (1 second or whatever you set it to) before hiding is used to keep the pop-out visible if the user temporarily mouses out.

  • The timer action is initiated whenever the user leaves (onMouseOut) any of the navigation links. This hides the pop-out layers if the user stays out of the links for more than 1 second.
  • The timer action must be cancelled when the user enters (onMouseOver) any navigation link. This prevents the timer from hiding a pop-out that should be active.
  1. Create a dummy link with a behavior to create some JavaScript we will use later.
    1. Insert some text on the page away from the menu system, and make it a link with "#"
    2. Add an action to that link using the Show-Hide Layers behavior
    3. The behavior should hide all the pop-out layers
  2. Insert the following code into the head section of the document, inside the existing JavaScript code area already created by Dreamweaver.

    Put the code after this existing code in the page:

<script language="JavaScript">
<!--

// start of custom pop-out code
// philip van allen vanallen@artcenter.edu
//
var timerID = "global";
function hideMenus() 
{
   // insert the MM_showHideLayers function you create that 
   // hides all popout layers. Be sure you put a semi-colon
   // at the end of the code. Here is an example:
   // MM_showHideLayers('products','','hide','sales','','hide');
}
function startTimer()
{
   stopTimer();
   // the number "700" is the number of milli-seconds (thousands-of-a-second)

   timerID = setTimeout("hideMenus()", 700);
}
function stopTimer()
{
   clearTimeout(timerID);
}
// end of custom code


 
add Dreamweaver code : 
to hide the menus : 
  1. Locate the dummy link you created earlier and select it
  2. View the HTML and copy the MM_showHideLayers code from the link. For example:
    MM_showHideLayers('products','','hide','sales','','hide')
  3. Paste this code into the custom JavaScript section in function hideMenus() -- see above code -- be sure to add a semicolon on the end ";"

 

  
create the behaviors in : 
each nav link and pop-out : 
sub-nav links : 
  • For each of the MAIN nav links, add the following behaviors:
    1. onMouseOver: Show/Hide Layers: show the pop-out layer for this nav, hide all other pop-out layers.
      -- Display the pop-out for this nav link, and hide any other pop-outs currently visible.
    2. onMouseOver: Call JavaScript: stopTimer()
      -- Cancel any active timers to prevent them from hiding the current pop-out.
    3. onMouseOut: Call JavaScript: startTimer()
      -- Start the timer so all pop-outs are hiden after 1 second.

  • For each of the SUB-nav links, add the following behaviors:
    1. onMouseOver: Call JavaScript: stopTimer()
      -- Cancel any active timers to prevent them from hiding the current pop-out.
    2. onMouseOut: Call JavaScript: startTimer()
      -- Start the timer so all pop-outs are hiden after 1 second.

 

  
hide the pop-out layers :  All of the pop-out layers should be hidden so they are not visible when the page loads:
  1. Select the layer
  2. In the Layers palette, hide the layer by selecting the closed eye icon.

 

  
remove the dummy : 
link in the page : 

Find the dummy link you created earlier, and remove it completely.

 

  
test the page : 

Preview the page to verify that the pop-out menus are working correctly.

 

  

all materials on this web site © copyright 2005, Philip van Allen

 top