Submit Your Article Forum Rules
Results 1 to 6 of 6

Thread: DHTML menu that uses images in top bar of menu

  1. #1

    DHTML menu that uses images in top bar of menu

    I have designed the following website

    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.


  2. #2
    WebProWorld MVP dharrison's Avatar
    Join Date
    May 2005
    Essex, UK
    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.

    Deb Harrison
    Hidden Content | Hidden Content
    If I have helped please add to my Reputation

  3. #3
    Senior Member ADAM Web Design's Avatar
    Join Date
    Dec 2003
    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.

  4. #4
    I've done this on several sites. (check out 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;
    topset = itm.offsetTop;
    while((itm = itm.offsetParent) != null) topset += itm.offsetTop;

    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.
    "I did not arrive at my understanding of the physical universe through my rational mind" -- Albert Einstein

  5. #5

    DHMTL drop down menu

    Not sure if this will be usefull

    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.
    See the difference

  6. #6
    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

Similar Threads

    By subho in forum Graphics & Design Discussion Forum
    Replies: 0
    Last Post: 06-20-2006, 09:41 AM
  2. DHTML or FLASH Menu
    By richkoi in forum Graphics & Design Discussion Forum
    Replies: 11
    Last Post: 10-05-2004, 08:54 PM
  3. DHTML Menu Help Please!
    By soulja90 in forum Graphics & Design Discussion Forum
    Replies: 1
    Last Post: 10-02-2004, 10:23 AM
  4. DHTML Menu Design
    By richkoi in forum Graphics & Design Discussion Forum
    Replies: 14
    Last Post: 12-05-2003, 05:37 AM
  5. DHTML menu auto include on all pgs
    By RareBreed in forum Graphics & Design Discussion Forum
    Replies: 1
    Last Post: 10-25-2003, 05:21 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts