3

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.

0

3 Answers 3

4

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks very much already had JQuery downloaded as I knew it would be neccessary!
If you are going to upload an example, upload it full. This does not works.
3

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

3 Comments

That's sort of what I'm looking for but I want the new menu items to stay there. Should've specified this was on click and not on hover!
Thank you for the link though they will come in handy in future! Gives a chance to study the CSS code for such a menu as well.
You can Google CSS menu generator and find plenty of others some which use jQuery in which case you can set onclick events yourself. If you found the answer helpful feel free to give it a +1 or accept it
1

Same here, free menu generator uses the following CSS3 and HTML5;
Free HTML CSS Menu Generator On-line

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.