如何使用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构建动态菜单？

回答

相关问题