Question

I have some existing code. This code uses an html table for a banner. The code looks like this:

<table id="banner" cellpadding="0" cellspacing="0" style="width:840px;">
  <tr>
    <td id="menu1" class="menu1">&nbsp;</td>
    <td id="menu2" class="menu2">&nbsp;</td>
    <td id="menu3" class="menu3">&nbsp;</td>
    <td id="menu4" class="menu4">&nbsp;</td>
    <td id="menu5" class="menu5">&nbsp;</td>
  </tr>
</table>

<div>My page content</div>

When the user clicks a cell, I need to display some menu items associated with the menu. My problem is I’m not sure how to get this menu structure in place. Because there are a lot of other JQuery components tied to this particular table, I cannot change it to another element without significant work. That rules out the DIV vs Table debate or using a UL menu structure.

Can someone tell me how I can get a list of menu options to be displayed when a user clicks a menu? The other item is, I need the menu items to appear without pushing the page content down. In effect, I need the menu items to appear on top of the page content.

Thank you for your help!

Answer 1

ok, this might work for you…

working example: http://jsfiddle.net/HDfzt/2/

HTML:

 <table id="banner" cellpadding="0" cellspacing="0" style="width:840px;">
  <tr>
      <td id="menu1" class="menu1">menu1<div><ul class='menu1DropDown'><li>item</li><li>item</li></ul></div></td>
    <td id="menu2" class="menu2">menu2<div><ul class='menu2DropDown'><li>item</li><li>item</li></ul></div></td>
    <td id="menu3" class="menu3">&nbsp;</td>
    <td id="menu4" class="menu4">&nbsp;</td>
    <td id="menu5" class="menu5">&nbsp;</td>
  </tr>
</table>

<div>My page content</div>

CSS:

#banner div {position: relative}
.menu1DropDown {display: none;}
.menu2DropDown {display: none;}

JS:

$("#banner td").hover(function(){
    $("ul", this).toggle("show");
    $("ul", this).css("position","absolute").css("top","0px").css("left","0px");
});