如何使用 CSS 和 JavaScript 构建动态菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11596991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I build a dynamic menu using CSS and JavaScript?
提问by WebDevDanno
I'm building a website for my tennis club and I've been looking various club websites for some inspiration.
我正在为我的网球俱乐部建立一个网站，我一直在寻找各种俱乐部网站以寻求灵感。
I've read about some solutions before to my problem but never gotten specific advise from a webmasters forum.
我之前已经阅读了一些解决我的问题的方法，但从未从网站管理员论坛中得到具体的建议。
How can I achieve something like:
我怎样才能实现这样的目标：
Menu:
菜单：
- Home
- About the Club
And then say a user clicks on 'About the Club' the menu then looks like below:
然后假设用户单击“关于俱乐部”，菜单如下所示：
- Home
- About the Club
Members
Prices
Tournaments
I hope that's clear enough if not I can provide an image to further explain my required result.
我希望这足够清楚，否则我可以提供一个图像来进一步解释我所需的结果。
P.s. I swear this is achievable using just CSS and JavaScript (perhaps a framework like JQuery) just can't specifically nail down a solution. Can't use PHP as its going on a server with no PHP/MySQL support.
Ps 我发誓这仅使用 CSS 和 JavaScript（可能是像 JQuery 这样的框架）就可以实现，只是无法明确确定解决方案。不能在没有 PHP/MySQL 支持的服务器上使用 PHP。
回答by Anagio
I would use a CSS menu generator which is easiest for people just getting started. A good one to use is http://purecssmenu.com/
我会使用一个 CSS 菜单生成器，这对刚入门的人来说是最简单的。一个很好的使用是http://purecssmenu.com/
回答by jeff
There's vertical navigation menu tutorials and resources all over the net. I suggest you do some research into the topic.
网络上到处都是垂直导航菜单教程和资源。我建议您对该主题进行一些研究。
Here's an example tutorial: http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
这是一个示例教程：http: //www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
Here's an example resource: http://codecanyon.net/item/jquery-vertical-dropdown-menu/161210
这是一个示例资源：http: //codecanyon.net/item/jquery-vertical-dropdown-menu/161210
Here, however, is some very simple code to get you started:
但是，这里有一些非常简单的代码可以帮助您入门：
<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>
This uses jQuery, so you'll have to download it from http://jquery.com/and include it.
这使用 jQuery，因此您必须从http://jquery.com/下载并包含它。
回答by Roman Polen.
Same here, free menu generator uses the following CSS3 and HTML5;
Free HTML CSS Menu Generator On-line
同样在这里，免费菜单生成器使用以下 CSS3 和 HTML5；
免费的 HTML CSS 菜单生成器在线
