[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