Creating a expandable menu/box.

I know what I want to do but was jsut wondering what tools/code I would need to do it.

What I want is a vertical menu that has say 4 main headings, when one of these is clicked if gives you another sub menu so you can sort of expand/collapse the menu.

What I would also like is if the menu was fully expanded then the container/background expanded to the correct size of the menu.

Hope that makes sense. Is this possible with just html/css? or would I be talking a certain amount of javascript?

 

You would need to use Javascript to do this. I'd recommend using jQuery.

 

Thanks for the quick reply Panzer, I'll definately look into that but was hoping to use it for a Uni assignment that needs to be completed soon so may have to change the menu idea to complete that and then use the jQuery once I sorted it.

 

No need to use a full JS library such as jQuery here (or ever, really). Its basically just detecting the click of a menu item, and then displaying the ul under it.

You'd probably lay out your HTML like:

<ul id="mainMenu">
    <li><a onclick="jsFunction(this)">Menu Item One</a>
         <ul style="position:absolute;display:none;">
             <li><a href="#"> Submenu Item One</a></li>
          <ul>
    </li>
    <li><a href="#">Menu Item Two</a></li>
</ul>

Code (markup):

For the Javascript function, it would pass "this" (the menu item), to a function, and then display the ul.

Ask in the JS forum for a more detailed response

BP