我正在为我的网球俱乐部建立一个网站,我一直在寻找各种俱乐部网站来寻找灵感。
我之前已经阅读过一些针对我的问题的解决方案,但从未从网站管理员论坛获得具体建议。
我怎样才能实现这样的目标:
菜单:
- Home
- About the Club
然后假设用户点击“关于俱乐部”,菜单如下所示:
- Home
- About the Club
Members
Prices
Tournaments
我希望这已经足够清楚了,如果没有的话,我可以提供一张图片来进一步解释我需要的结果。
附言我发誓这仅使用 CSS 和 JavaScript(也许是像 JQuery 这样的框架)是可以实现的,只是无法明确确定解决方案。无法在不支持 PHP/MySQL 的服务器上使用 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/ 下载它并将其包括在内。
关于html - 如何使用 CSS 和 JavaScript 构建动态菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11596991/