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

Question

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.

Answer 1

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.

Answer 2

I would use a CSS menu generator which is easiest for people just getting started. A good one to use is http://purecssmenu.com/