如何使用 CSS 和 JavaScript 构建动态菜单？答案

【问题标题】：How can I build a dynamic menu using CSS and JavaScript?如何使用 CSS 和 JavaScript 构建动态菜单？
【发布时间】：2014-05-13 19:39:56
【问题描述】：

我正在为我的网球俱乐部建立一个网站，我一直在寻找各种俱乐部网站以获取灵感。

我之前已经阅读过一些关于我的问题的解决方案，但从未从网站管理员论坛获得具体建议。

我怎样才能实现这样的目标：

菜单：

       - Home
       - About the Club

然后说用户点击“关于俱乐部”，菜单如下所示：

       - Home
       - About the Club
            Members
            Prices
            Tournaments

我希望这足够清楚，否则我可以提供一张图片来进一步解释我所需的结果。

附：我发誓这是可以实现的，仅使用 CSS 和 JavaScript（可能是 JQuery 之类的框架）只是无法具体确定解决方案。不能在没有 PHP/MySQL 支持的服务器上使用 PHP。

【问题讨论】：

标签： html css javascript jquery

【解决方案1】：

全网都有垂直导航菜单教程和资源。我建议您对该主题进行一些研究。

这是一个示例教程： 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/ 下载它并包含它。

【讨论】：

非常感谢已经下载了 JQuery，因为我知道它是必要的！
如果您要上传示例，请完整上传。这不起作用。

【解决方案2】：

我会使用 CSS 菜单生成器，这对于刚入门的人来说是最简单的。一个好用的是http://purecssmenu.com/

【讨论】：

这就是我正在寻找的东西，但我希望新的菜单项保留在那里。应该指定这是点击而不是悬停！
感谢您提供的链接，尽管它们将来会派上用场！也有机会研究此类菜单的 CSS 代码。
你可以谷歌 CSS 菜单生成器并找到很多其他使用 jQuery 的，在这种情况下你可以自己设置 onclick 事件。如果您发现答案有帮助，请随时给它 +1 或接受它

【解决方案3】：

同样，免费菜单生成器使用以下 CSS3 和 HTML5；
Free HTML CSS Menu Generator On-line

【讨论】：