Solved

Popup menus

Posted on 2000-03-22
3
1 solution
600 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
Join The Community
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

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!

Take Survey Now!
Question has a verified solution.

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

Sorting Arrays and Collections in JavaScript
Article by: DanRollins
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 …
Hex Maze
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Introduction to jQuery (Part 1)
Video by: Jason
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)
Introduction to jQuery (Part 2)
Video by: Jason
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…
Advertise Here

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

Advertise Here