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.
COURSE of the MONTH
11 days, 9 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Popup menus
Posted on 2000-03-22
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?
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?
[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
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
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();
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();
Try this URL:
http://webreference.com/dhtml/hiermenus/
It even automates it for you (the Dynomat)
Brian
http://webreference.com/dhtml/hiermenus/
It even automates it for you (the Dynomat)
Brian
Featured Post
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
Course of the Month11 days, 9 hours left to enroll
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.