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

Question

我正在为我的网球俱乐部建立一个网站，并且一直在寻找各种俱乐部网站以获取一些启发。

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

我该如何实现以下目标：

菜单：

       - Home
       - About the Club

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

       - Home
       - About the Club
            Members
            Prices
            Tournaments

我希望这很清楚，否则我可以提供一张图片以进一步说明我所需的结果。

附言：我发誓，仅使用CSS和JavaScript（也许是像JQuery这样的框架）就无法实现解决方案，这是可以实现的。 在没有PHP / MySQL支持的服务器上不能使用PHP。

Answer 1

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

Answer 2

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

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

Answer 3

同样，免费菜单生成器使用以下CSS3和HTML5；
免费的HTML CSS菜单生成器在线