unobtrusive javascript to handle drop down/fold out menu

Discussion in 'Javascript' started by pantagruel, Aug 9, 2005.

  1. pantagruel

    pantagruel Guest

    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?
     
    pantagruel, Aug 9, 2005
    #1
    1. Advertising

  2. pantagruel

    RobG Guest

    pantagruel wrote:
    > 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?

    --
    Rob
     
    RobG, Aug 9, 2005
    #2
    1. Advertising

  3. pantagruel

    pantagruel Guest

    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.
     
    pantagruel, Aug 10, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Van Duijn

    Fold out menu to use with frames

    Van Duijn, Feb 4, 2005, in forum: Javascript
    Replies:
    0
    Views:
    126
    Van Duijn
    Feb 4, 2005
  2. fold-out Menu script

    , Oct 25, 2005, in forum: Javascript
    Replies:
    1
    Views:
    172
  3. Animesh K

    Share your views on unobtrusive javascript

    Animesh K, Jul 20, 2007, in forum: Javascript
    Replies:
    23
    Views:
    274
    David Mark
    Jul 30, 2007
  4. lorlarz
    Replies:
    12
    Views:
    255
    Henry
    Jul 9, 2008
  5. Ivann
    Replies:
    1
    Views:
    208
    Ivann
    Jul 22, 2008
Loading...

Share This Page