我如何使用CSS和JavaScript构建动态菜单？ [英] How can I build a dynamic menu using CSS and JavaScript?

问题描述

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

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

我怎样才能达到像这样：

菜单：

- 主页
- 关于俱乐部


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

   - 主页
  - 关于俱乐部
会员
价格
锦标赛
  

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

P.s。我发誓，只要使用CSS和JavaScript（也许像JQuery这样的框架），这是可以实现的，但不能明确指出解决方案。不能使用PHP作为其服务器，不支持PHP / MySQL。

解决方案

垂直导航菜单教程和资源全网。我建议你对这个主题做一些研究。

下面是一个示例教程：
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 =＃>主页< / a>< / li> 
< li> 
< a href =＃>关于Club< / a> 
< ul> 
< li>< a href =＃>成员< / a>< / li> 
< li>< a href =＃>价格< / a>< / li> 
< li>< a href =＃>锦标赛< / 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/ 并包含它。

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.

解决方案

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

Here's an example resource: 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.

这篇关于我如何使用CSS和JavaScript构建动态菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！