Popup menus

Posted on 2000-03-22
Last Modified: 2008-03-10
Using Javascript, how does one create a POPUP menu.  Let's say I have an HTML page.  On the page is an image.  I want to have a popup cascading menu appear when the user hovers their mouse cursor overtop of the image.

By "cacscading menu", I refer to a single popup menu list that contains...

Jump 1
Jump 2
Jump 3
Jump 4

And then if the user hovers their mouse over Jump 1, a new submenu emerges, with new choices:

   Jump 1a
   Jump 1b
   Jump 1c

And when the user finally chooses a menu choice, the script will take the user to that particular URL/Web page.

Can this be done with Javascript?

Question by:Softtech
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 16

Accepted Solution

maneshr earned 40 total points
ID: 2645276
here is a working example.

Currently the menu items have text inside them. You can replace them with images by changing the lines which have menu#.makeMenuBar


you can replace ....
menu5.makeMenuBar('Contact us', 25, image_width, "\'contact_us.html\'");


menu5.makeMenuBar('<img src=test.gif>', 25, image_width, "\'contact_us.html\'");

to have am image instead of  a text!!

Also you will need to edit the .js file and replace the current menu items with your own items and their corresponding URL's

<STYLE TYPE="text/css">
  P {line-height: 25pt;}
<TITLE>Corporate Information</TITLE>

<SCRIPT LANGUAGE="JavaScript1.2" SRC="drop_menu.js">

//do browser detect stuff
var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;
var layerRef = (NS4) ? "document" : "document.all";
var styleRef = (NS4) ? "" : ".style";

var menu_items=new Array("menu1","menu2","menu3","menu4","menu5");
var activeMenu = 0;
var maxZ = 1;
var prev_menu_item=null;

// Popup Class that has all the methods and properties
function popout(id, posY, posX, width) { = id;       // the element's name (and the variable's name)
  this.posY = posY;   // the element's top property
  this.posX = posX;   // the element's left property
  this.width = width; // the element's width = false;  // do not show the element
  this.makeMenuBar = makeMenuBar;  // constructs the image's tab
  this.makeMenu = makeMenu;        // constructs the drop down box
  this.showMenu = showMenu;        // sets the element's visibility
  this.hideMenu = hideMenu;        // hides the drop down box

// Stylesheet to set properties for the individual Menu Items
function setMenuItemStyle(){
    '\n<STYLE TYPE="text/css">',
    '.menubar {',
    'color : blue;',
    'font-family: \"arial\";',
    'font-size : 12px;',
    'font-weight : bold;',
    'text-decoration : none;',
    'A.menubar:hover {color: red;}\n\n',
    '.link {',
    'color : white;',
    'font-family: \"arial\";',
    'font-weight : bold;',
    'font-size : 12px;',
    'text-decoration : none;',
    ' {color: red;}\n\n',
    ' {',
    'color : red;',
    'text-decoration : none;',

// Create the top level Menu Bar
function makeMenuBar(imgURL, imgHeight, imgWidth, imgAlt) {
    '\n<STYLE TYPE="text/css">',
    '#',, 'img {',
      'position: absolute;',
      'font-family: \"arial\";',
      'font-size : 12px;',
      'left: ',this.posX, '; top: ', this.posY, ';',
      'width: ', imgWidth, ';',
      'text-decoration : none;',
      'z-index: 1',
    '\n<DIV ID="',, 'img">',
    '\n<A href="javascript:',, '.showMenu('+imgAlt+')" '+
    'onmouseover="javascript:',, '.showMenu('+imgAlt+')" '+
    'onclick="if (window.focus) {window.focus(); return false;}" class="menubar">' + imgURL+

// Creates the drop down box, sets its properties & ..
// .. displays the individual links.
function makeMenu(boxBg, boxColor, boxCode) {
  var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
    '\n<STYLE TYPE="text/css">',
    '#',, 'box {',
      'position: absolute;',
      'left: ',this.posX, '; top: ', (this.posY+15), ';',
      'width: ', this.width, ';',
      'height: auto;',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: hidden;',
      'border-width: 2px;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      'z-index: 1',
    '\n<DIV ID="',, 'box" onMouseOver="javascript:{if (!NS4) window.event.cancelBubble = true;}">',

function showMenu(URL) {
  // First hide ALL the drop down boxes
  for (var i=0;i<menu_items.length;i++){
    eval(menu_items[i]+".show = false");
    eval(layerRef + '["' + menu_items[i] + 'box"]' + styleRef + '.visibility = "hidden"');
  }// End of for

  // Display the clicked link in a frame
  // eval(window.parent.frames[1].location.replace(URL));
  if (NS4) {
    eval('document.' + + 'img.left = ' + this.posX);
    eval('document.' + + 'img.zIndex = ' + (++maxZ));
    eval('document.' + + 'box.zIndex = ' + maxZ);
    eval('document.' + + 'box.visibility = "show"');
  } else {
    eval( + ' = ' + this.posX);
    eval( + ' = ' + (++maxZ));
    eval( + ' = ' + maxZ);
    eval( + ' = "visible"');
  activeMenu =;     // set the name of the currently active menu

  // For IE Browsers catch the onMouseOver event at the menu &..
  // .. do not let it get to the document.
  if (styleEnabled() && !NS4) window.event.cancelBubble = true;

// Hides the currently active menu
function hideMenu(e){
  //check if theres a menu active
  if (activeMenu) {
    menuID = activeMenu+ "box";
    if (NS4) {
      menuX1 = document[menuID].left;
      menuX2 = menuX1 + document[menuID].clip.right;
      menuY1 = document[menuID].top;
      menuY2 = menuY1 + document[menuID].clip.bottom;
      if (e.pageX < menuX1 || e.pageX > menuX2 || e.pageY > menuY2) {
        eval(layerRef + '["' + menuID + '"]' + styleRef + '.visibility = "hidden"');
        activeMenu = 0;
       eval(layerRef + '["' + menuID + '"]' + styleRef + '.visibility = "hidden"');
      activeMenu = 0;

// Check if Stylesheets are enabled or not
function styleEnabled(){
  return ((NS4) || IE4);

function init(){
  if (!styleEnabled()) return;

  // Trap the onMouseMove event and call hideMenu
  if (NS4){
    document.onmousemove = hideMenu;
    document.onmouseover = hideMenu;

  setMenuItemStyle(); // set the default display style for the menu items
  activeMenu = 0;     // Initially no menu is active
  var spacing=0;
  var image_width=0;

  // Create the 1st Popup menu (For Corporate Information)
  if (NS4){
    menu1 = new popout('menu1', 13,spacing, 200);
    menu1 = new popout('menu1', 5,spacing, 200);

  // Insert the URL to the images you want here
  // with the ID, Y position, X Position & size/width of the box
  menu1.makeMenuBar('Corporate Information', 25, image_width, "\'corp_info.html\'");
  menu1.makeMenu('black', 'gray',
    '\n<A href="corp_info_1.html" target="_self" class="link">The Beginning & The Growth</A>\n<BR>' +
    '\n<A href="corp_info_2.html" target="_self" class="link">The Group Today</A>\n<BR>' +
    '\n<A href="corp_info_3.html" target="_self" class="link">Infrastructure</A>\n<BR>' +
    '\n<A href="corp_info_4.html" target="_self" class="link">Multi Organics Ltd. & Abhideep Chemicals Pvt. Ltd.</A>\n<BR>' +
    '\n<A href="corp_info_5.html" target="_self" class="link">Global Chemical Alliances</A>\n<BR>' +
    '\n<A href="corp_info_6.html" target="_self" class="link">Human Resources</A>\n<BR>');

  // Create the 2nd Popup menu (For Products)
  // with the ID, Y position, X Position & size/width of the box
  if (NS4){
    menu2 = new popout('menu2', 13,spacing ,205);
    menu2 = new popout('menu2', 5,spacing ,205);

  // Insert the URL to the images you want here
  menu2.makeMenuBar('Products', 25, image_width, "\'products.html\'");
  menu2.makeMenu('black', 'gray',
    '\n<A href="products_1.html" target="_self" class="link">Self Manufactured</A>\n<BR>' +
      '\n<A href="products_2.html" target="_self" class="link">Contract / Toll Manufactured</A>\n<BR>' +
    '\n<A href="products_3.html" target="_self" class="link">Markets Served</A>\n<BR>' +
    '\n<A href="products_4.html" target="_self" class="link">Research & Development</A>\n<BR>' +
    '\n<A href="products_5.html" target="_self" class="link">Continous Business Improvement</A>\n<BR>' +
    '\n<A href="products_6.html" target="_self" class="link">Specifications</A>\n<BR>');

  // Create the 3rd Popup menu (For Environment & Safety)
  // with the ID, Y position, X Position & size/width of the box
  if (NS4){
    menu3 = new popout('menu3', 13,spacing, 135);
    menu3 = new popout('menu3', 5,spacing, 135);

  // insert the URL to the images you want here
  menu3.makeMenuBar('Environment & Safety', 25, image_width, "\'env_safety.html\'");
  menu3.makeMenu('black', 'gray',
    '\n<A href="env_safety_1.html" target="_self" class="link">Environment & Safety</A>\n<BR>');

  // Create the 4th Popup menu (For Help / Feedback & Enquiry Form)
  // with the ID, Y position, X Position & size/width of the box
  if (NS4){
    menu4 = new popout('menu4', 13,spacing, 100);
    menu4 = new popout('menu4', 5,spacing, 100);

  // insert the URL to the images you want here
  menu4.makeMenuBar('Helpdesk', 25, image_width, "\'helpdesk.html\'");
  menu4.makeMenu('black', 'gray',
    '\n<A href="helpdesk_1.html" target="_self" class="link">Help / Feedback</A>\n<BR>' +
      '\n<A href="helpdesk_2.html" target="_self" class="link">Enquiry Form</A>\n<BR>');

  // Create the 5th Popup menu (For Contact us item)
  // with the ID, Y position, X Position & size/width of the box
  if (NS4){
    menu5 = new popout('menu5', 13,spacing, 73);
    menu5 = new popout('menu5', 5,spacing, 73);

  // insert the URL to the images you want here
  menu5.makeMenuBar('Contact us', 25, image_width, "\'contact_us.html\'");
  menu5.makeMenu('black', 'gray',
    '\n<A href="contact_us_1.html" target="_self" class="link">Contact us</A>\n<BR>');



Expert Comment

ID: 2645315
Try this URL:

It even automates it for you (the Dynomat)

LVL 14

Expert Comment

ID: 4864087

Your example works really well in IE, however in Netscape there is a really weird problem...

If there is a textbox in the area where the popup menu is to be displayed, the menu shows up *behind* the textbox instead of in fron of it... This only happens in Netscape. Got any clues?


Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question