Looking for a simple collapsible/expandable menu

[ste]

Hi there,

I'm wondering if anyone can point me in the direction of a simple vertical
menu that has collapsible/expandable menu options?

I don't want any fancy graphics or anything, and the simpler this is the
better (i.e. so that I can use and maintain it!). If at all possible, I'd
rather use something which doesn't require JavaScript, so this would leave
me with CSS menus?

Here's the format of menu I'm after, just some very simple text hyperlinks:

Home
About
Gallery
Contact

If you click Gallery, for example, I want the following hyperlinks to
appear:

Home
About
Gallery
- Landscapes
- Portraits
- Macro
Contact

If you click Gallery again, then I'd like those options to disappear.
Likewise for the other main menus.

At the moment, I'm using a normal HTML list menu which has all links
visible. Of course, this looks quite cluttered and scruffy, which is why
I'm looking for this alternative solution.

I appreciate any advice.

Thanks,

Ste

 

[Edwin van der Vaart]

Hi there,

I'm wondering if anyone can point me in the direction of a simple vertical
menu that has collapsible/expandable menu options?

I don't want any fancy graphics or anything, and the simpler this is the
better (i.e. so that I can use and maintain it!). If at all possible, I'd
rather use something which doesn't require JavaScript, so this would leave
me with CSS menus?

Here's the format of menu I'm after, just some very simple text hyperlinks:

Home
About
Gallery
Contact

If you click Gallery, for example, I want the following hyperlinks to
appear:

Home
About
Gallery
- Landscapes
- Portraits
- Macro
Contact

If you click Gallery again, then I'd like those options to disappear.
Likewise for the other main menus.

At the moment, I'm using a normal HTML list menu which has all links
visible. Of course, this looks quite cluttered and scruffy, which is why
I'm looking for this alternative solution.

I appreciate any advice.

You mean like this
http://www.alistapart.com/d/horizdropdowns/horizontal.htm
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de and software-help1.org to duplicate this post.

 

[Toby Inkster]

I'm wondering if anyone can point me in the direction of a simple vertical
menu that has collapsible/expandable menu options?

http://examples.tobyinkster.co.uk/menu/menu2

 

[ste]

You mean like this
http://www.alistapart.com/d/horizdropdowns/horizontal.htm
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de and software-help1.org to duplicate this post.

Hi there,

I was actually after something even simpler than that, i.e. without the
'popouts' and without the border around the links, but thanks anyway.

Ste

 

[ste]

http://examples.tobyinkster.co.uk/menu/menu2

Hi there,

That's how I want it to work, but wonder if you have an even simpler example
that was just text on it's own, i.e. without the border around the link or
the plus/minus signs?

The code does look very nice and clean though.

Thanks,

Ste

 

[dorayme]

Hi there,

That's how I want it to work, but wonder if you have an even simpler example
that was just text on it's own, i.e. without the border around the link or
the plus/minus signs?

What is stopping you? You can dispense with the img signs and
choose white or transparent for colours.

Yes, TI's nicely conserves space and it is easier to allow for
vertical in a menu nav bar.

But let me add a word on this stuff:

Think if it is really all that useful to have so much of the
navigation right there and then. Quite often, if it is so much
more than what is reasonable to simply display (certainly OP's
first example of about 4 links and one expansion of about 4 more
was not a case for drop downing), consider just not having the
expansion at all. If some one wants to know what that link is
about, it is simple enough. It is a link and goes somewhere. That
is where the "expansion" is evident.

Yes, I know it may seem as if one is so much neater and useful
than the other. But mostly it is more show than useful:

When the links are displayed in a page that is nothing really to
do with the meaning of the set displayed, they are less useful. A
home page simply can't have everything on it and it is a mistake
to try. When do you stop? The same set is instantly meaningful
displayed up front on the page that is especially relevant to the
set - a local set of links.

Everything depends on everything else. If you make your pages
load fast as you should, going to it rather than fiddling (and
yes, I mean fiddling... one has to put energy into holding the
mouse still when in a hurry) with hover is as quick.

This way of thinking might then free you from even needing js or
possibly cross browser challenged hover dropdown css

 

[Greg N.]

Think if it is really all that useful to have so much of the
navigation right there and then.

You're right for the majority of sites.

Yet I find "complete" menus (either simple or with drop down expansion)
convenient on sites that I visit frequently. On these sites, I prefer
not to plough through a series of pages to get where I need to go.

 

[Toby Inkster]

The code does look very nice and clean though.

I've actually got a much cleaner version knocking around somewhere. I'll
have a look for it and post it soon.

 

[KiwiBrian]

Yes please. I loved the first one and would love to see the next one too.
Thanks
Brian Tozer

 

[dorayme]

You're right for the majority of sites.

Yet I find "complete" menus (either simple or with drop down expansion)
convenient on sites that I visit frequently. On these sites, I prefer
not to plough through a series of pages to get where I need to go.

And yes, it is understandable that you find such convenient.
There is some tension between designing for newcomers and
designing for frequent visitors. We all wrestle with this one!

There is no general answer to this. What is very convenient for
the one, can confuse and delay others. Newcomers can simply get
caught up in these menus and be puzzled or confused. They can try
to satisfy cursory curiosities, go direct to something 3 or 4
deep and then get lost no matter the breadcrumb trail
(breadcrumbs are not magic keys to appreciation when you don't
know your way about; but better than not having them). They would
better appreciate what is what by the slower more logical route.
The big problem for newcomers boils down to the links not having
a lot of meaning unless the context is understood.

So, first thing to do especially with dropdowns is give as much
meaning as possible to what the link is about. Choice of words is
important. But then again, the tension surfaces: the idea of the
dropdown is for neatness and space conservation. If the link text
is meaningful at the cost of being less than very brief, it
tramples on the raison d'tre for the dropdown.

 

[Toby Inkster]

Yes please. I loved the first one and would love to see the next one too.
Thanks

All the code in one file:

http://examples.tobyinkster.co.uk/menu/menu3.strict

This has several advantages over the previous menu:

1. It allows the user to expand several submenus at once.

2. It uses cookies to remember which menus are expanded; so
if the user surfs off to another page and comes back, the menu
is still open where they left it; or if the menu appears on
multiple pages, navigation remains consistant throughout the site.

3. It removes all the horrible class and onclick attributes
scattered throughout the code.

Of course, in real life you don't want to have all that CSS and Javascript
embedded into your HTML file like that -- you want to save them into
external CSS and JS files, like this:

http://examples.tobyinkster.co.uk/menu/menu4

There is still possible room for improvement -- the Javascript could do
with being cleaned up a little for instance; and there is no provision for
an extra level of nested lists.

 

[nobbiesp]

Additional Level

This URL /menu/menu4 is exactly the code I've been looking for. Thank you so much for sharing it.

For the page I'm working on I am trying to apply an additional level of navigation. Could you tell me how I would go about doing that?

Home
About
Gallery
- Landscapes
- Portraits
- - 2000
- - 2001
- Macro
Contact

Also, how would I go about setting the font to Arial. Sorry for the stupid question.

Thank you.

KiwiBrian wrote:

> Yes please. I loved the first one and would love to see the next one too.
> Thanks

All the code in one file:

This has several advantages over the previous menu:

1. It allows the user to expand several submenus at once.

2. It uses cookies to remember which menus are expanded; so
if the user surfs off to another page and comes back, the menu
is still open where they left it; or if the menu appears on
multiple pages, navigation remains consistant throughout the site.

3. It removes all the horrible class and onclick attributes
scattered throughout the code.

Of course, in real life you don't want to have all that CSS and Javascript
embedded into your HTML file like that -- you want to save them into
external CSS and JS files, like this:

/menu/menu4

There is still possible room for improvement -- the Javascript could do
with being cleaned up a little for instance; and there is no provision for
an extra level of nested lists.

--
Toby A Inkster BSc (Hons) ARCS