DHTML menu that uses images in top bar of menu

[jeannemalherbe]

I have designed the following website http://memeworx.co.za/retaildynamics/index_new.htm

My problem is as follows. I need a drop down menu under the heading "shopping malls" on the top menu. The problem is that the menu is all made up of images and not plain text. All the menus I have found have plain text and a background colour as their main bar.

The other problem is that the site has been centered on the page, so I can't use layers with absolute positions.

Please help as I am in a real fix.

Thanks
Jeanne
www.memeworx.co.za

[dharrison]

Hi Jeanne

Why would you want little images on your drop-down menu? Hopefully you just mean little images?

This is a bit of a long shot but can't you
after each menu item and have the hidden menu underneath? and then use a combination of CSS and DHTML to show the menu on mouse over

If not then just ignore me. Layers are quite new to me.

HTH

[ADAM Web Design]

Before I go any further, you probably should look at doing that site via hand versus the pitfalls of Dr*amw*av*r. DW tends to create some very bulky and inefficient code, which is what we have here.

You could, theoretically, use absolute positioning on this if you added style="position: relative" to each table cell that contains a menu link.

Your absolute positioning would then be defined relative to that table cell (the top left would be 0, 0).

Whenever you define absolute positioning inside of a relatively positioned item, the absolute positioning is defined in relation to that relatively positioned item.

[RedMark]

I've done this on several sites. (check out www.mdmm.com). Put a graphic in the table (a 1 pixel transparent gif works fine, or use the graphic that belongs there) and name it finder.

Then use the following function to find the position of that graphic

var itm=findObj("finder")
leftset = itm.offsetLeft;
while((itm = itm.offsetParent) != null) leftset += itm.offsetLeft;
itm=findObj("finder");
topset = itm.offsetTop;
while((itm = itm.offsetParent) != null) topset += itm.offsetTop;
itm=findObj("divText")
itm.style.left=leftset-3
itm.style.top=topset
itm.style.visibility='visible'

the function findObj is a variation on a theme...

function findObj(n, d) {
var i,x;
if(!d) d=document;
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for (i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
if (!x && d.getElementById) x=d.getElementById(n); return x;
}

The affect of this is you get the position of your "finder" graphic and position your menu accordingly, but I think Adam is absolutely right. To do this effectively, you're going to have to get into some hand-coding.

[rumslappers]

Not sure if this will be usefull
http://www.sothink.com/product/dhtmlmenu/index.htm

I have found this software to be quite versatile and take the hard work out of creating drop down menus. You can add images even animated ones, resize as required and have the text over the image.

The software is reasonable in price if you don't mind spending a little.

[p.cottam]

Cant you simply create a single navigation banner from the indivigual images you currently use on your site

Then use the hotspot tool to make your first link (Home)area, then use the add behaviour - show pop up menu

Simply repeat the hotspots for other link areas