Solved

Popup menus

Posted on 2000-03-22
3
581 Views
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?

0
Comment
Question by:Softtech
3 Comments
 
LVL 16

Accepted Solution

by:
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

Eg.

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

WITH...

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


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

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

=================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(){
  document.write(
    '\n<STYLE TYPE="text/css">',
    '.menubar {',
    'color : blue;',
    'font-family: \"arial\";',
    'font-size : 12px;',
    'font-weight : bold;',
    'text-decoration : none;',
    '}\n',
    'A.menubar:hover {color: red;}\n\n',
    '.link {',
    'color : white;',
    'font-family: \"arial\";',
    'font-weight : bold;',
    'font-size : 12px;',
    'text-decoration : none;',
    '}\n\n',
    'A.link:hover {color: red;}\n\n',
    'A.link:active {',
    'color : red;',
    'text-decoration : none;',
    '}\n</STYLE>\n'
  );
}

// Create the top level Menu Bar
function makeMenuBar(imgURL, imgHeight, imgWidth, imgAlt) {
  document.write(
    '\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',
    '}',
    '</STYLE>',
    '\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+
    '</A>\n</DIV>'
  );
}

// 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;';
  document.write(
    '\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, ';',
      padding,
      'z-index: 1',
    '}',
    '</STYLE>',
    '\n<DIV ID="', this.id, 'box" onMouseOver="javascript:{if (!NS4) window.event.cancelBubble = true;}">',
    boxCode,
    '</DIV>\n'
  );
//
}

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;
      }
    }else{
       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.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = hideMenu;
  }else{
    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){
    spacing=200;
    image_width=138;
    menu1 = new popout('menu1', 13,spacing, 200);
  }else{
    spacing=220;
    image_width=145;
    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){
    spacing+=image_width+5;
    image_width=65;
    menu2 = new popout('menu2', 13,spacing ,205);
  }else{
    spacing+=image_width+5;
    image_width=70;
    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){
    spacing+=image_width+5;
    image_width=133;
    menu3 = new popout('menu3', 13,spacing, 135);
  }else{
    spacing+=image_width+5;
    image_width=143;
    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){
    spacing+=image_width+5;
    image_width=60;
    menu4 = new popout('menu4', 13,spacing, 100);
  }else{
    spacing+=image_width+5;
    image_width=65;
    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){
    spacing+=image_width+9;
    image_width=70;
    menu5 = new popout('menu5', 13,spacing, 73);
  }else{
    spacing+=image_width+9;
    image_width=70;
    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>');

}

init();
0
 
LVL 4

Expert Comment

by:brigmar
ID: 2645315
Try this URL:

http://webreference.com/dhtml/hiermenus/

It even automates it for you (the Dynomat)

Brian
0
 
LVL 14

Expert Comment

by:mcrider
ID: 4864087
maneshr,

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?


Cheers!®©
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

776 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