?
Solved

Popup menus

Posted on 2000-03-22
3
Medium Priority
?
611 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
[X]
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
3 Comments
 
LVL 16

Accepted Solution

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

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

752 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