Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Popup menus

Posted on 2000-03-22
Medium Priority
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 120 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) {
  this.id = 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
  this.show = 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;',
    'A.link:hover {color: red;}\n\n',
    'A.link:active {',
    'color : red;',
    'text-decoration : none;',

// Create the top level Menu Bar
function makeMenuBar(imgURL, imgHeight, imgWidth, imgAlt) {
    '\n<STYLE TYPE="text/css">',
    '#', this.id, '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="', this.id, 'img">',
    '\n<A href="javascript:', this.id, '.showMenu('+imgAlt+')" '+
    'onmouseover="javascript:', this.id, '.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">',
    '#', this.id, '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="', this.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.' + this.id + 'img.left = ' + this.posX);
    eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));
    eval('document.' + this.id + 'box.zIndex = ' + maxZ);
    eval('document.' + this.id + 'box.visibility = "show"');
  } else {
    eval(this.id + 'img.style.left = ' + this.posX);
    eval(this.id + 'img.style.zIndex = ' + (++maxZ));
    eval(this.id + 'box.style.zIndex = ' + maxZ);
    eval(this.id + 'box.style.visibility = "visible"');
  activeMenu = this.id;     // 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

636 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