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

How can I build a dynamic menu using CSS and JavaScript?

本文关键字：构建 动态 菜单 JavaScript 何使用 CSS      更新时间：2024-01-03

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

我以前读过一些解决问题的方法，但从未从网站管理员论坛得到过具体的建议。

我如何才能实现以下目标：

菜单：

       - Home
       - About the Club

然后说用户点击"关于俱乐部"菜单如下：

       - Home
       - About the Club
            Members
            Prices
            Tournaments

我希望这足够清楚，如果不是，我可以提供一张图片来进一步解释我的要求结果。

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

网上到处都是垂直导航菜单教程和资源。我建议你对这个话题做一些研究。

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

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

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

相关文章：