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.

jeff · Accepted Answer · 2012-07-22 01:07:42Z

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.

edited Jul 22, 2012 at 1:07

answered Jul 22, 2012 at 0:57

jeff

8,3582 gold badges34 silver badges43 bronze badges

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

2 Comments

WebDevDanno Over a year ago

Thanks very much already had JQuery downloaded as I knew it would be neccessary!

user352353 Over a year ago

If you are going to upload an example, upload it full. This does not works.

Anagio · Accepted Answer · 2012-07-22 00:26:35Z

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/

answered Jul 22, 2012 at 0:26

Anagio

3,0759 gold badges47 silver badges81 bronze badges

3 Comments

WebDevDanno Over a year ago

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!

WebDevDanno Over a year ago

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.

Anagio Over a year ago

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

Roman Polen. · Accepted Answer · 2014-05-13 11:39:56Z

1

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

answered May 13, 2014 at 11:39

Roman Polen.

5597 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related