Sent by Paul Novitski on 12 August 2004 04:04
At 07:07 AM 8/11/2004, Gary Every wrote:
>I'm looking for some css examples that will allow me to do the
>following, hopefully without javascript.
>
>I'd like a bulleted list, such as:
>
>+ Admin Documentation
>+ Web Documentation
>...
>
>When the user clicks on the "+" sign, it displays a submenu:
>- Admin Documentation
> + Servers
> + MySQL
> ...
>+ Web Documentation
To augment what others have said, the solution I use in menus such as this
leans on CSS heavily and on JavaScript very lightly. Therefore I hope I
won't be castigated -- or castrated, or that matter! -- for describing my
mongrel solution in this purebred forum.
In my model, the onclick behavior implemented in JavaScript performs just
one function: to set the class name of the page body or menu container to a
value corresponding to the menu item clicked.
CSS does everything else -- modifies the selected menu item, shows the next
menu level, and hides the previous menu selection.
For example, the default style for sub-menus is hidden:
ul#navmenu li ul
{
display: none;
}
Selected sub-menus are displayed when their parental id matches the
container's class:
ul#navmenu.frogs li#frogs ul,
ul#navmenu.lizards li#lizards ul,
ul#navmenu.pumpkins li#pumpkins ul,
ul#navmenu.philosophies li#philosophies ul
{
display: block;
}
This operates on a standard list structure like so:
<ul id="navmenu" class="">
<li id="frogs"><a href="frogs.html">Frogs</a>
<ul>
<li><a href="frogs.html#Fred">Fred</a></li>
<li><a href="frogs.html#Franny">Franny</a></li>
</ul>
</li>
...
</ul>
In that example, the top-level menu items are hyperlinks so that the menu
is nominally functional even if JavaScript is disabled and the sub-menus
don't show.
Another arguably better method that leaves the entire menu structure
exposed in the absence of scripting is to let JavaScript hide the sub-menus
on page load by assigning all the sub-level UL tags a submenu class which
CSS defines as hidden:
ul#navmenu li ul.submenu
{
display: none;
}
....which doesn't affect the sub-menus if scripting is disabled, because
they are initially marked up without those class names.
This model can also accommodate a GUI style in which expanded sub-menus
remain open until explicitly closed, by concatenating multiple class names
in the parent:
<ul id="navmenu" class="frogs philosophies lizards">
...
I'm happy to share details of the scripting logic off-list.
Cheers,
Paul
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
