如何使用CSS和JavaScript構建動態菜單？

我正在爲我的網球俱樂部建立一個網站，我一直在尋找各種俱樂部網站的靈感。如何使用CSS和JavaScript構建動態菜單？

我已經閱讀過關於我的問題之前的一些解決方案，但從來沒有從網站管理員論壇得到具體的建議。

如何能夠做到這樣的：

菜單：

 - Home 
     - About the Club

然後說用戶點擊 '關於俱樂部' 的菜單，然後看起來象下面這樣：

 - Home 
     - About the Club 
      Members 
      Prices 
      Tournaments

我希望這很清楚，如果不是我可以提供一個圖像來進一步解釋我所需的結果。

P.s.我發誓，只要使用CSS和JavaScript（也許像JQuery這樣的框架），這是可以實現的，但不能明確指出解決方案。無法使用PHP作爲其在沒有PHP/MySQL支持的服務器上。

來源

2012-07-22 WebDevDanno

調查jQuery。 – frenchie 2012-07-22 00:55:45

有垂直導航菜單教程和資源遍佈網絡。我建議你對這個話題做一些研究。

下面是一個例子教程： http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html

下面是一個例子資源： http://codecanyon.net/item/jquery-vertical-dropdown-menu/161210

然而，這裏是一些非常簡單的代碼，讓您開始：

<ul> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">About the Club</a> 
     <ul> 
      <li><a href="#">Members</a></li> 
      <li><a href="#">Prices</a></li> 
      <li><a href="#">Tournaments</a></li> 
     </ul> 
    </li> 
</ul> 
<style> 
ul ul { display:none; } 
</style> 
<script src="jquery-1.7.2.min.js"></script> 
<script> 
$("li").click(function() { 
    $(this).find("ul").css("display", "block"); 
    return false; 
}); 
</script>

這使用jQuery的，所以你必須從http://jquery.com/下載幷包含它。

來源

2012-07-22 00:57:35 jeff

非常感謝已經有JQuery下載，因爲我知道它是必要的！ – WebDevDanno 2012-07-23 22:00:18

如果您要上傳示例，請將其上傳完整。這不起作用。 – 2013-04-08 18:41:49

我會使用CSS菜單生成器，這對於剛入門的人來說是最簡單的。一個好用的是http://purecssmenu.com/

來源

2012-07-22 00:26:35 Anagio

這就是我正在尋找的東西，但我希望新的菜單項留在那裏。應該指定這是點擊而不是懸停！ – WebDevDanno 2012-07-22 00:30:09

謝謝你的鏈接，雖然他們將在未來派上用場！給出一個機會來研究這樣的菜單的CSS代碼。 – WebDevDanno 2012-07-22 00:31:41

你可以谷歌的CSS菜單生成器，並找到其他一些使用jQuery在這種情況下，你可以設置onclick事件你自己。如果你發現答案有幫助，隨意給它+1或接受它 – Anagio 2012-07-22 00:34:05

同樣在這裏，免費菜單生成器使用以下CSS3和HTML5;
Free HTML CSS Menu Generator On-line

來源

2014-05-13 11:39:56

這是一個很好的方式：http：//purecssmenu.com – Ampere 2016-09-09 10:45:07

如何使用CSS和JavaScript構建動態菜單？

回答

相關問題