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.
=================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
}
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;
// 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>');
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?
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
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
//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","men
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:'
'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:{i
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[
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.righ
menuY1 = document[menuID].top;
menuY2 = menuY1 + document[menuID].clip.bott
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(Eve
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('Corpora
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">Infrastructur
'\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('Product
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">Specification
// 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('Environ
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('Helpdes
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
menu5.makeMenu('black', 'gray',
'\n<A href="contact_us_1.html" target="_self" class="link">Contact us</A>\n<BR>');
}
init();