What is this menu called??

I want to put a kind of drop-down menu on a page, but not the "hover" kind with custom graphics I always see when I search.

I'm thinking of an all-text one, in which the subcategories are hidden by default, with only the headers showing:

> Shoes
> Pants
> Shirts

When you click "Pants" (or the arrow beside it), the list becomes:

> Shoes
v Pants
- Slacks
- Jeans
- Shorts
- Assless
> Shirts

I can't give any online example off the top of my head, except for Google Analytics' "View", "Marketing Optimization" and "Content Optimization" menus.

I don't know how to search for this, so I can't find any code for it. I don't even know if it's CSS or java! I looked at the Google Analytics source, but it's a little over my head.

If you can help, thanks a lot!

 

Try the examples at www.milonic.com

 

There's two different approaches to this expandable menus.

For static expansion, you have to be in one of the submenu page for all other submenus in the same top-level menu to show. This is either done in PHP or statically (html hard coded).

For dynamic expansion, you can either use Flash or DHTML+javascript to do the job. There are many free codes (and paid) around.

Try this search, you may find what you are looking for:

http://www.google.com/search?q=free+dhtml+menu

 

These are often referred to as 'Tree Menus'. Here's another link.

 

Hmmm, looking at the source selection at the Google Analytics site, it seems that it's only CSS and no JS required to do that ...


tayiper

 

Thanks everyone, I found what I was looking for (I think) at http://javascript.internet.com/navigation/expanding-menu.html.

I haven't played with it enough yet, and I may have problems getting an entire row's background to change color on hover (I was only getting the background directly behind the text to do so on my brief playing around with the CSS), but it does just what I was thinking.

I may end up doing a straight JS anyway if I can't get it like I want, but it's pretty cool. The only part I didn't like about the above was having to place stuff in the header, the body, the CSS file, AND a separate JS file.

But to the end user, none of that matters I guess.

 

You can try a css menu that does not require javascritpt for such task.

There are many available right here: http://css.maxdesign.com.au/listamatic

 

You can do that in diffrent ways CSS show/hide layer. Javascript/DOM, etc..

 

thanks for the tools mate. really helpful things,

 

It's also called an accordion menu. You will find heaps if you search for "jQuery accordion menu", like this one:
http://jqueryui.com/demos/accordion/