Solved

Drop-down menu for use in my tabled menu bar?

Posted on 2003-11-28
5
755 Views
Last Modified: 2012-06-27
First, please lets not get into a discussion about the relative merits of tables vs CSS. :-)

I've created a website using Photo Shop and have a set of images in a table that comprise a horizontal menu.  If you've never seen a Photo Shop website or you are not following what I mean please see the website in question:

http://www.rodzstuph.com
(text is not mine, I know it reads sort of "rural")

I need to change the menu into a drop-down menu to avoid using the sub-menus on each subsection of the web that I presently have.

The solution I have in mind should function sort of like one of the following:

http://javascript.internet.com/navigation/cascading-menu.html
http://javascript.internet.com/navigation/cascade-menu.html

... however I need to be able to insert the menu items into the current tables, use the current graphics for the initial menu item and not have them push the rest of the page around.  If you have seen the results from using Xara Menu Maker that's sort of what I want.  The above examples use positioned <div> elements that after a couple of hours of work I was not able to get to function correctly.

Oh, of course it needs to be cross-browser capable.

I'm pretty sure this is all client-side but in case it's not the website is being served in Win2K/IIS5 in regular-old ASP.

Now I'm not a java developer, I can muddle my way around a little in the code but this is a freebie site I did for the guy and I'm really out of time on it.  I can of course handle putting my own labels in the code and maybe extending an array or 3 but I'm looking for some code that will work for me without having to learn how it works first and then re-write it if you can see where I'm coming from.

Thanks in advance for any assistance, and just ask if you need more clarification.

0
Comment
Question by:lbussy
5 Comments
 
LVL 14

Expert Comment

by:huji
ID: 9843365
Well as much as I understood at the first glance to that cascading menu code, you have to make some litlle changes on it, so that you can define each menu seperately with its own size, so you can use current graphics' settings for it.
is it what you are looking for?
huji
0
 

Author Comment

by:lbussy
ID: 9844520
Yes, provided it works with the tabled images and doesn't push things around in teh rest of the cells.  I guess I fail to see how it can be changed.  I'm sure it's possible it's just outside my ability.
0
 
LVL 4

Accepted Solution

by:
Bit_Twiddler earned 400 total points
ID: 9845246
Below is an example of how the code could be changed.

What I did was add the javascript code to yout orignal design and change the code to include your root menu items positoned as close as I could get them to the original. The sub menu items were left alone. You would have to adapt them to your needs. Things looked ok when I checked them in IE 6 and Netscape 7.

Perhaps it can get you started on your way.

<HTML>
<HEAD>

<meta name="description" content="Powder Coating by Rod - Specializing in custom powder coating for motorcycles and cars. We love bikes here, especialy the Harley Sportster." />
<meta name="keywords" content="powder coating, high temp powdercoating, wheel powdercoating, powdercoating, motorcycle powdercoating, motorcycle powder coating" />
<meta name="abstract" content="Powder Coating by Rod - Specializing in custom powder coating for motorcycles and cars." />
<meta name="revisit-after" content="7 days" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="MSThemeCompatible" content="no" />

<title>Powder Coating by Rod - Specializing in custom powdercoating for motorcycles and cars</title>

<link rel="stylesheet" type="text/css" href="default.css">

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Angus Turnbull -->
<!-- Web Site:  http://gusnz.cjb.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
}
// Hide timeout.
var popTimer = 0;
// Array showing highlighted menu items.
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {

// Array index is the menu number. The contents are null (if that menu is not a parent)
// or the item number in that menu that is an ancestor (to light it up).
itemArray = new Array(menu.length);

while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the hierarchy, return.
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}

// Pass an array and a boolean to specify colour change, true = over colour.
function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
// Change the colours of the div/layer background.
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
         }
      }
   }
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}

// *** MENU CONSTRUCTION FUNCTIONS ***

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
// True or false - a vertical menu?
this.isVert = isVert;
// The popout indicator used (if any) for this menu.
this.popInd = popInd
// Position and size settings.
this.x = x;
this.y = y;
this.width = width;
// Colours of menu and items.
this.overCol = overCol;
this.backCol = backCol;
// The stylesheet class used for item borders and the text within items.
this.borderClass = borderClass;
this.textClass = textClass;
// Parent menu and item numbers, indexed later.
this.parentMenu = null;
this.parentItem = null;
// Reference to the object's style properties (set later).
this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
// Reference to the object's style properties (set later).
this.ref = null;
}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
// Variable for holding HTML for items and positions of next item.
var str = '', itemX = 0, itemY = 0;

// Remember, items start from 1 in the array (0 is menu object itself, above).
// Also use properties of each item nested in the other with() for construction.
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;

// The width and height of the menu item - dependent on orientation!
var w = (isVert ? width : length);
var h = (isVert ? length : width);

// Create a div or layer text string with appropriate styles/properties.
// Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently
// the width must be a miniumum of 3 for it to work in that browser.
if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';

// Add mouseover handlers and finish div/layer.
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';

// Add contents of item (default: table with link inside).
// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
// If a target frame is specified, also add that to the <a> tag.

str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {

// Set target's parents to this menu item.
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

// Add a popout indicator.
if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}

// Insert a div tag to the end of the BODY with menu HTML in place for IE4.
if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}

// In NS4, create a reference to a new layer and write the items to it.
if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
   }
}

// Syntaxes: *** START EDITING HERE, READ THIS SECTION CAREFULLY! ***
//
// menu[menuNumber][0] = new Menu(Vertical menu? (true/false), 'popout indicator', left, top,
// width, 'mouseover colour', 'background colour', 'border stylesheet', 'text stylesheet');
//
// Left and Top are measured on-the-fly relative to the top-left corner of its trigger, or
// for the root menu, the top-left corner of the page.
//
// menu[menuNumber][itemNumber] = new Item('Text', 'URL', 'target frame', length of menu item,
//  additional spacing to next menu item, number of target menu to popout);
//
// If no target menu (popout) is desired, set it to 0. Likewise, if your site does not use
// frames, pass an empty string as a frame target.
//
// Something that needs explaining - the Vertical Menu setup. You can see most menus below
// are 'true', that is they are vertical, except for the first root menu. The 'length' and
// 'width' of an item depends on its orientation -- length is how long the item runs for in
// the direction of the menu, and width is the lateral dimension of the menu. Just look at
// the examples and tweak the numbers, they'll make sense eventually :).

var menu = new Array();

// Default colours passed to most menu constructors (just passed to functions, not
// a global variable - makes things easier to change later in bulk).
var defOver = '#336699', defBack = '#003366';

// Default 'length' of menu items - item height if menu is vertical, width if horizontal.
var defLength = 22;

// Menu 0 is the special, 'root' menu from which everything else arises.
menu[0] = new Array();
// A non-vertical menu with a few different colours and no popout indicator, as an example.
// *** MOVE ROOT MENU AROUND HERE ***  it's positioned at (5, 0) and is 17px high now.
menu[0][0] = new Menu(false, '', 476, 139, 17, '#666666', '#666666', '', 'itemText');
// Notice how the targets are all set to nonzero values...
// The 'length' of each of these items is 40, and there is spacing of 10 to the next item.
// Most of the links are set to '#' hashes, make sure you change them to actual files.
menu[0][1] = new Item('  Home', '#', '', 33, 10, 1);
menu[0][2] = new Item('  Powder Coating', 'http://Powder/default.asp', '', 96, 3, 2);
menu[0][3] = new Item('  Rodz World', 'http://RodzWorld/default.asp', '', 71, 10, 0);
// An example of a link with a target frame/window as well...
menu[0][4] = new Item('  Links', 'http://gusnz.cjb.net', '_new', 20, 20, 0);
menu[0][5] = new Item('  Contact', 'http://gusnz.cjb.net', '_new', 28, 0, 0);


// File menu.
menu[1] = new Array();
// The File menu is positioned 0px across and 22 down from its trigger, and is 80 wide.
// All text in this menu has the stylesheet class 'item' -- see the <style> section above.
// We've passed a 'greater-than' sign '>' as a popout indicator. Try an image...?
menu[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[1][1] = new Item('Open', '#', '', defLength, 0, 0);
menu[1][2] = new Item('Save', '#', '', defLength, 0, 0);
// Non-zero target means this will trigger a popout -- menu[4] which is the 'Reopen' menu.
menu[1][3] = new Item('Reopen', '#', '', defLength, 0, 4);
menu[1][4] = new Item('Exit', '#', '', defLength, 0, 0);

// Edit menu.
menu[2] = new Array();
menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('Cut', '#', '', defLength, 0, 0);
menu[2][2] = new Item('Copy', '#', '', defLength, 0, 0);
menu[2][3] = new Item('Paste', '#', '', defLength, 0, 0);

// Help menu
menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[3][1] = new Item('Contents', '#', '', defLength, 0, 0);
menu[3][2] = new Item('Index', '#', '', defLength, 0, 0);
menu[3][3] = new Item('About', '#', '', defLength, 0, 5);

// Reopen menu
menu[4] = new Array();
// This is across but not down... a horizontal popout (with crazy stylesheets :)...
menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyBorder', 'crazyText');
// These items are lengthier than normal, and have extra spacing due to the fancy borders.
menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', '', 36, 4, 0);
menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7, 0);
menu[4][3] = new Item('Etc. etc...', '#', '', defLength, 0, 0);

// Help About popout
menu[5] = new Array();
// Leftwards popout with a negative x and y relative to its trigger.
menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 0, 0);




// *** OPTIONAL CODE FROM HERE DOWN ***

// These two lines handle the window resize bug in NS4. See <body onResize="...">.
// I recommend you leave this here as otherwise when you resize NS4's width menus are hidden.

var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');


// This is a quick snippet that captures all clicks on the document and hides the menus
// every time you click. Use if you want.

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt)
{
 if (isNS4) document.routeEvent(evt);
 hideAllBut(0);
}


// This is just the moving command for the example.

function moveRoot()
{
 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}
//  End -->
</script>

<!-- *** IMPORTANT STYLESHEET SECTION - Change the border classes and text colours *** -->
<style>
<!--

.itemBorder { border: 1px solid black }
.itemText { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }

.crazyBorder { border: 2px outset #663399 }
.crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Arial, Helvetica }

-->
</style>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">


<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR>
    <TD COLSPAN=9> <IMG SRC="images/top_banner.jpg" /></TD>
  </TR>
  <TR>
    <TD COLSPAN=9> <IMG SRC="images/top-picture.jpg" /></TD>
  </TR>
  <TR>
    <TD COLSPAN=3> <IMG SRC="images/nav-bar.jpg" /></TD>
    <TD bgcolor="#666666" colspan="6"> </TD>
  </TR>
  <TR>
    <TD COLSPAN=9> <IMG SRC="images/top-gradation.jpg" /></TD>
  </TR>
  <TR>
    <TD ROWSPAN=3>&nbsp; </TD>
    <TD COLSPAN=6> <h2>Welcome to Powder Coating by Rod</h2></TD>
    <TD COLSPAN=2 ROWSPAN=3>&nbsp; </TD>
  </TR>
  <TR>
    <TD COLSPAN=6> <IMG SRC="images/horizontal-line.jpg" /></TD>
  </TR>
  <TR>
    <TD>&nbsp; </TD>
    <TD COLSPAN=5> <p class="BigFirst">At Powder Coating by Rod. we specialize
        in custom powder coating for motorcycles and cars. We love bikes here,
        especially the Harley Sportster. We can coat your wheels, rims, anything
        on your bike or car that's metal usually. We have powders in all colors
        and can even powdercoat your pieces to look almost like chrome (more like
        polished aluminum) and can do it at an extremely competitive price.</p>
      <p>Browse the site using the links above and see pictures of customer projects,
        examples of colors, effects and finishes and even some pictures of my
        H-D Sportster and cars.</p>
      <p>You are also welcome to visit me and my family and if you&#39;re ever
        near Virginia Beach VA, please stop by and say hi.&nbsp; We can have burgers
        and Ale (including Ginger) ready in a jiffy and you&#39;re always welcome,
        particularly if you&#39;re a biker.</p>
      <p>Hope you found the site interesting.&nbsp; Please sign our guestbook
        if you did, else mail me if you didn&#39;t.</p></TD>
  </TR>
  <TR>
    <TD COLSPAN=9> <IMG SRC="images/bottom-bar.jpg" usemap="#map" border="0" /></TD>
  </TR>
  <TR>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=113 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=58 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=306 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=42 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=93 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=72 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=11 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=30 HEIGHT=1 /></TD>
    <TD> <IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 /></TD>
  </TR>
</TABLE>
<map name="Map">
  <area shape="rect" coords="617, 0, 799, 20" href="http://www.bussy.org" target="_blank">
</map>
</BODY>
</HTML>
0
 

Assisted Solution

by:cmfrench
cmfrench earned 100 total points
ID: 9845675
If you like to keep it simple go check this out:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnfp2k2/html/odc_fpdropdownmenu.asp

The "Dropdown menu example" was not working but the zipped file named "FrontPage 2002 Sample Dropdown menu.zip" contains and example of the menu.

This menu setup is pretty simple.  Your using ASP development so why not stetp a main header and 3 additional sub headers (it looked like you would need 3 sub headers) and use ".inc" file to keep it consistent through the sub menu pages.   Once you create the first sub header then you can copy it for other two sub header and make your menu changes.  This menu use tables and css so making these changes are simple.  There is a small javascript file that is the function of the menu, but you do not need to modify it at all.

Good luck I hope it helps!



 
0
 

Author Comment

by:lbussy
ID: 9847275
I've split the points on here and I'll give a quick description why:

Bit-Twiddler gave me exactly what I was looking for and for that I am grateful for the help.  400 points.

cmfrench pointed me to a resource I completely missed in my searches and I'm dissapointed in myself for not finding it.  Even though I was not able to get that example working it did teach me a little that will come in handy later.  100 points.

Thanks for the help and more thanks for getting me the help I needed so quickly.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now