unobtrusive javascript to handle drop down/fold out menu

[pantagruel]

I have an old web application I did where browsers with dynamic
capabilities received a drop down menu on the top of the page and a
fold out on the left hand side of the page and non-dynamic browsers
received two static menus. This was done via server side detection of
browser capabilities and branching the application. Over time needless
to say the capabilities between the dynamic and static sides got
seriously out of whack.

Now the drop-down menu was not done unobtrusively, it was done via
mouseovers and the like.

Obviously it makes sense to change the menus to be done by catching
events. But I would also like to redo the dynamic and static branching.


The way I figured would be as follows:

The static menus are placed inside of noscript elements.
The dynamic menus are loaded with display set to none. Script writes in
a new css changing dynamic menu display to block.

As I understand noscript is considered bad via unobtrusive javascript
theory, however I have a hard time seeing how one could make a menu
that would display properly as a static menu yet also function as a
drop down or fold out (especially fold out), collapsible expandable
menus are easy since they basically have the menu order placed in the
structure needed.

So I'm wondering if anyone has reasonable suggestions on how to
succeed.

On another subject, anyone know what the effect of a bunch of links
inside a noscript element that mirror a bunch of links in the normal
page will do to Google's algorithms?

 

[RobG]

I have an old web application I did where browsers with dynamic
capabilities received a drop down menu on the top of the page and a
fold out on the left hand side of the page and non-dynamic browsers
received two static menus. This was done via server side detection of
browser capabilities and branching the application. Over time needless
to say the capabilities between the dynamic and static sides got
seriously out of whack.

Now the drop-down menu was not done unobtrusively, it was done via
mouseovers and the like.

Obviously it makes sense to change the menus to be done by catching
events. But I would also like to redo the dynamic and static branching.


The way I figured would be as follows:

The static menus are placed inside of noscript elements.
The dynamic menus are loaded with display set to none. Script writes in
a new css changing dynamic menu display to block.

As I understand noscript is considered bad via unobtrusive javascript
theory, however I have a hard time seeing how one could make a menu
that would display properly as a static menu yet also function as a
drop down or fold out (especially fold out), collapsible expandable
menus are easy since they basically have the menu order placed in the
structure needed.

So I'm wondering if anyone has reasonable suggestions on how to
succeed.

On another subject, anyone know what the effect of a bunch of links
inside a noscript element that mirror a bunch of links in the normal
page will do to Google's algorithms?

There is a reasonable menu system here based on a list, it works
whether JavaScript is available or not.

<URL:http://www.mattkruse.com/javascript/mktree>

The basic menu looks pretty staid, but you can tart it up with CSS to
look much more special (or not...).

There is much debate over noscript elements, their use can be seen as
pointless - if a site is well designed and works without scripting
(albeit without the benefits of scripting), then what's the point?

 

[pantagruel]

The example you give follows what I was saying about the difference
between an expand/collapse menu and a fold out menu.

the markup of the expand/collapse menu is a simple tree that mimics the
display of the tree. so all one has to do is to toggle displays. if
javascript is not running then all displays are set to block.

the fold out menu has a presentation as follows:

menu 1 - fold out
menu 2 fold out
menu 3 fold out
menu 4

where the folded out portion is done via a mouseover on menu item 1.

The problem is that the fold out menu is relatively easy to implement
using javascript if we follow the same method used by the collapse
expand, that is to say our markup follows our presentation and the
javascript just toggles the display. This is of course problematic
because a non-javascript enabled browser should then see all the fold
outs at once.

The other solution would be to have the markup follow the structure of
a collapse/expand menu, but to use the javascript to turn the normally
expandable elements into fold out menus. I haven't seen that yet.