"Sub-menu" in CSS?

[Amos E Wolfe]

I will shortly be updating a website, using html and css, which will
validate and also be accessible to users not using Javascript, etc. The
current design uses a Javascript menu - I inherited the site and its current
design from the guy who owns the hosting company.

The menu is at http://www.vintagetransport.org.uk/welcome.html and also on
subsequent pages clicked on from that menu. I have no problems using css for
menus, and have already found useful tutorials to re-create a similar style,
but is it possible to create the pop-out sub-menu items using CSS? Easily?

If not I will probably use a separate "page" for the menu which will have
the secondary level menu enabled (using php server-side includes and
definitely not frames at all ever), unless anyone has any better
suggestions?

many thanks

-=# Amos E Wolfe #=-

I also intend to update the "root" page of the site at
http://www.vintagetransport.org.uk so it validates -
http://www.vintagetransport.org.uk/tandh/ has been started and so far both
html and css validate.

 

[David Dorward]

is it possible to create the pop-out sub-menu items using CSS?

Yes - but not so they work in Internet Explorer, or without accessibility
problems.

If not I will probably use a separate "page" for the menu which will have
the secondary level menu enabled (using php server-side includes and
definitely not frames at all ever), unless anyone has any better
suggestions?

It is perfectly possible to create accessible pop-open menus using
JavaScript (the key is progressive enhancement). It becomes a balancing act
between the potential usefulness of being able to jump to any page of the
site from any other page against the cost (in bandwidth and for non-CSS
users) of putting so many links on every page.

 

[Amos E Wolfe]

It is perfectly possible to create accessible pop-open menus using
JavaScript (the key is progressive enhancement). It becomes a balancing
act
between the potential usefulness of being able to jump to any page of the
site from any other page against the cost (in bandwidth and for non-CSS
users) of putting so many links on every page.

Perhaps I would be better off having a "top level" menu on every page, then
a "context secondary menu" on sub pages, so for example clicking "Gallery"
on the menu would bring up a page which then had further options (e.g.
thumbnails instead of text links).

-=# Amos E Wolfe #=-

 

[kchayka]

Perhaps I would be better off having a "top level" menu on every page, then
a "context secondary menu" on sub pages,

IMO, this is the best solution. It works in virtually any browsing
environment and any one page is really only a couple "clicks" away.

BTW, submenus that pop-out to the side, like on the site you posted, can
be a particular usability problem. They require the visitor to have a
certain level of dexterity to position the mouse correctly. If the
cursor happens to move up/down too far on its way to a submenu item, the
submenu will close or a different one will open and the user has to
start all over again. I find these rather frustrating to use.

 

[Toby Inkster]

The menu is at http://www.vintagetransport.org.uk/welcome.html and also on
subsequent pages clicked on from that menu. I have no problems using css for
menus, and have already found useful tutorials to re-create a similar style,
but is it possible to create the pop-out sub-menu items using CSS? Easily?

Kinda, sorta, if you're willing to use (but not rely on!) Javascipt.

http://juxta-music.com/

 

[kchayka]

http://juxta-music.com/

When I tab through links, the focus outline disappears and the browser
status bar shows URLs that I can't see on the screen. Not sure I like that.

 

[RF Rohrer]

There is a TRICK word in you description of need . . "Easily" . . . alot of
CSS cross-browser stuff of this level of complexity is not "Easily" done