添加JQuery菜單

我有一些現有的代碼。此代碼使用HTML表格作爲橫幅。代碼如下所示：添加JQuery菜單

<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>

當用戶單擊一個單元格時，我需要顯示一些與菜單相關的菜單項。我的問題是我不知道如何獲得這個菜單結構。因爲有很多其他JQuery組件綁定到這個特定的表，所以我不能在沒有重要工作的情況下將其更改爲另一個元素。這排除了DIV vs Table辯論或使用UL菜單結構。

有人能告訴我如何獲得菜單選項列表，當用戶點擊菜單時顯示？另一個項目是，我需要菜單項出現而不會推動頁面內容。實際上，我需要菜單項出現在頁面內容的頂部。

謝謝你的幫助！

來源

2011-03-22 Villager

？ – Kyle 2011-03-22 12:45:01

沒關係，這可能會爲你工作...

工作示例：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：爲什麼，_why_您使用的是一個這樣的表

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

來源

2011-03-22 13:00:32

添加定位到主/子菜單。隱藏在LOAD的孩子，並顯示懸停/點擊等

#menu1, #menu2 { position:relative...} 
#sub1, #sub2 { position:absolute, display:hidden...} 

$('#menu1').hover(function() { 
    $('#sub1').fadeIn().css('top','xxx'); //show the sub, and position it 
} function() { 
    $('#sub1').fadeOut().css('top','xxx'); //hide it again 
} 
});

來源

2011-03-22 12:52:47 Dawson

嘿，看看這個網站http://www.stunicholls.com/ ... 我從這裏關於jQuery的菜單和其他學到了很多東西。而且，我建議你應該使用

`<ul> 
     <li><a href="..">menu1</a></li> 
     <li><a href="..">menu2</a></li> 
     ... 
    </ul>`

希望幫助

來源

2011-03-22 12:57:13 jayAnn

添加JQuery菜單

回答

相關問題