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

css, html, javascript, jquery

Solution

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.

Problem

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.

Original source