[thelist] dynamic menus tutorial
Sam-I-Am
sam at sam-i-am.com
Thu Jan 22 13:49:13 CST 2004
Stephen Rider wrote:
> The reason there aren't simple tutorials is that it's a complex issue.
this is best illustrated by the lengthy tutorial (12 weeks?) that
webreference ran which culminated in heirmenus. (and the fact that after
fixing many bugs and attempting to support the various users of these
menus, they decided it needed to become a commercial product.) Those
should be archived somewhere, and will cover a lot of the issues. If you
don't need to support NN4, things are considerably less complex, though.
A couple of things that might not be immediately obvious if you come to
this with some basic javascript/css/dhtml experience:
* The menu pops up when you rollover some trigger element, with a
onmousever event handler. Simple so far. But when you go to use the
menu, you mouseout of the element - so you need to keep careful track of
events.
* Anyway, you can't rely on the onmouseout event firing - if a user
moves their mouse fast enough, the event is never caught, so your menus
can be left hanging. Most people use a timer to deal with this, and have
them disappear themselves after a couple of seconds.
* How are you going to position the menus? Relative to some element's
position, or absolutely with x,y px coordinates (implying that the
underlying page is also pixel perfect in every supported browser).
* What about unsupported browsers? What will they see, how will those
users get to the links the menus provide?
* Are you looking for flyout-style menus, menus with submenus? Multiply
effort with each level of nesting you wish to support. You can run into
problems where there's no room in the viewport for the menu - what then?
Flyout the other direction?
* Not to mention the problems with Flash, select menus and other objects
that will show through the menus (layers). If you want a dropdown or
flyout menu, you better be sure you know what's going to be underneath
those layer on all pages the menu will be used on.
* Any time you add content to a page (hidden or otherwise) you add to
it's weight - in html and supporting assets (js, css, images). While
menus can be a neat way to maximise screen realestate, don't kid
yourself when it comes to page-weight.
There are many many ways to skin this cat, so while a good tutorial
would be useful, it doesn't beat looking around, and picking apart the
code of the ones you most like.
Finally, consider that while menus like this might seem obvious and
intuitive to you, many users will just not get it. They'll never see the
menus, or may not have the pointer control necessary to use them.
hth
Sam
More information about the thelist
mailing list