Recommendations for JavaScript drop-down menu code
 

I would appreciate recommendations for JavaScript code that implements
drop-down, hierarchical menus. Are there high quality libraries for
this, or is it more typical for people to roll their own?

My preference is for open source code, but royalty-free commercial
code would be acceptable as well.

Ideally, the code would:
* Allow configuring horizontal or vertical menus
* Allow configuring the delay for closing the menu after mousing out
of the menu
* Provide a mechanism for playing well with existing code and other
libraries
* Be well designed & documented
* Be highly portable among browsers in common use
* Allow styling via css

Thanks,
Brian Adkins

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 27, 12:04 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> I would appreciate recommendations for JavaScript code that implements
> drop-down, hierarchical menus. Are there high quality libraries for
> this, or is it more typical for people to roll their own?

I don't know if there are any good ones out there, but there are lots
of bad ones.

>
> My preference is for open source code, but royalty-free commercial
> code would be acceptable as well.
>
> Ideally, the code would:
> * Allow configuring horizontal or vertical menus

That is a function of CSS, not script.

> * Allow configuring the delay for closing the menu after mousing out
> of the menu

That doesn't make sense to me for a hierarchical menu.

> * Provide a mechanism for playing well with existing code and other
> libraries
> * Be well designed & documented
> * Be highly portable among browsers in common use

Your expectations of freebie menu scripts are likely too high.

> * Allow styling via css

You'd be hard-pressed to disallow CSS with script.

Anyway, craate your hierarchy with nested lists, style it with CSS and
then look for a script that initially hides all but the parent list
and then displays child lists in response to mouse or keyboard input
(you'll find that most ignore the keyboard.)

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 27, 12:53 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Sep 27, 12:04 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > My preference is for open source code, but royalty-free commercial
> > code would be acceptable as well.
>
> > Ideally, the code would:
> > * Allow configuring horizontal or vertical menus
>
> That is a function of CSS, not script.

There are a number of ways of accomplishing this. CSS is one way, but
the JavaScript code can make CSS styling less difficult or more
difficult.

> > * Allow configuring the delay for closing the menu after mousing out
> > of the menu
>
> That doesn't make sense to me for a hierarchical menu.

It makes even more sense for a hierarchical menu. Consider navigating
through a complicated menu structure via hovering, then right before
you click the appropriate entry, you accidentally move the mouse too
far and the whole menu closes. That's the scenario (typically found on
CSS-only menus) I want to avoid, so I'd like a "grace period" if you
will.

> > * Provide a mechanism for playing well with existing code and other
> > libraries
> > * Be well designed & documented
> > * Be highly portable among browsers in common use
>
> Your expectations of freebie menu scripts are likely too high.

If so, then a commercial solution would seem to make sense. Do you
know of good commercial menus?

> > * Allow styling via css
>
> You'd be hard-pressed to disallow CSS with script.
>
> Anyway, craate your hierarchy with nested lists, style it with CSS and
> then look for a script that initially hides all but the parent list
> and then displays child lists in response to mouse or keyboard input
> (you'll find that most ignore the keyboard.)

If I was only looking for that, I'd just write it myself, but I'm not
big on reinventing wheels.

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 28, 1:49 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> On Sep 27, 12:53 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > On Sep 27, 12:04 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > > My preference is for open source code, but royalty-free commercial
> > > code would be acceptable as well.
>
> > > Ideally, the code would:
> > > * Allow configuring horizontal or vertical menus
>
> > That is a function of CSS, not script.
>
> There are a number of ways of accomplishing this. CSS is one way, but
> the JavaScript code can make CSS styling less difficult or more
> difficult.

How so? Your app must not break down when either or both is disabled.

>
> > > * Allow configuring the delay for closing the menu after mousing out
> > > of the menu
>
> > That doesn't make sense to me for a hierarchical menu.
>
> It makes even more sense for a hierarchical menu. Consider navigating
> through a complicated menu structure via hovering, then right before
> you click the appropriate entry, you accidentally move the mouse too
> far and the whole menu closes. That's the scenario (typically found on
> CSS-only menus) I want to avoid, so I'd like a "grace period" if you
> will.

I didn't mean the delay made no sense, but the usual rollover-only
functionality of canned menu scripts.

>
> > > * Provide a mechanism for playing well with existing code and other
> > > libraries
> > > * Be well designed & documented
> > > * Be highly portable among browsers in common use
>
> > Your expectations of freebie menu scripts are likely too high.
>
> If so, then a commercial solution would seem to make sense. Do you
> know of good commercial menus?
>
> > > * Allow styling via css
>
> > You'd be hard-pressed to disallow CSS with script.
>
> > Anyway, craate your hierarchy with nested lists, style it with CSS and
> > then look for a script that initially hides all but the parent list
> > and then displays child lists in response to mouse or keyboard input
> > (you'll find that most ignore the keyboard.)
>
> If I was only looking for that, I'd just write it myself, but I'm not
> big on reinventing wheels.

If you aren't looking for what I described, then what are you looking
for?

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 28, 1:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Sep 28, 1:49 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > On Sep 27, 12:53 pm, David Mark <dmark.cins...@gmail.com> wrote:
> > > On Sep 27, 12:04 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > > > Ideally, the code would:
> > > > * Allow configuring horizontal or vertical menus
>
> > > That is a function of CSS, not script.
>
> > There are a number of ways of accomplishing this. CSS is one way, but
> > the JavaScript code can make CSS styling less difficult or more
> > difficult.
>
> How so? Your app must not break down when either or both is disabled.

"Must not" ? I'm surprised you think you know enough about the
requirements for my application to be able to make this statement. The
title of this post has to do with recommending JavaScript menus. If
you're not going to make a recommendation, please don't also make such
ridiculous statements. Combining arrogance and ignorance is
inadvisable.

Before you reply with some ridiculous retort, please identify at least
3 major web applications that would practically fall apart if users
disabled both JavaScript & CSS and reconcile that with your statement
above.

>
> > > > * Allow configuring the delay for closing the menu after mousing out
> > > > of the menu
>
> > > That doesn't make sense to me for a hierarchical menu.
>
> > It makes even more sense for a hierarchical menu. Consider navigating
> > through a complicated menu structure via hovering, then right before
> > you click the appropriate entry, you accidentally move the mouse too
> > far and the whole menu closes. That's the scenario (typically found on
> > CSS-only menus) I want to avoid, so I'd like a "grace period" if you
> > will.
>
> I didn't mean the delay made no sense, but the usual rollover-only
> functionality of canned menu scripts.

I can see you have many opinions. It's a pity none of them have to do
with the original request.

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 28, 2:12 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> On Sep 28, 1:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > On Sep 28, 1:49 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > > On Sep 27, 12:53 pm, David Mark <dmark.cins...@gmail.com> wrote:
> > > > On Sep 27, 12:04 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > > > > Ideally, the code would:
> > > > > * Allow configuring horizontal or vertical menus
>
> > > > That is a function of CSS, not script.
>
> > > There are a number of ways of accomplishing this. CSS is one way, but
> > > the JavaScript code can make CSS styling less difficult or more
> > > difficult.
>
> > How so? Your app must not break down when either or both is disabled.
>
> "Must not" ? I'm surprised you think you know enough about the
> requirements for my application to be able to make this statement. The

It has nothing to do with the requirements of your application.
That's a general rule for any competent Web page or application.

> title of this post has to do with recommending JavaScript menus. If
> you're not going to make a recommendation, please don't also make such
> ridiculous statements. Combining arrogance and ignorance is
> inadvisable.

The specific response was to your assertion that JS and CSS are
somehow intertwined. It should be intuitively obvious that if you
disable one but not the other, then any reliance on JS to prop up CSS
will be exposed. It is inadvisable to argue a point that you clearly
don't understand.

>
> Before you reply with some ridiculous retort, please identify at least
> 3 major web applications that would practically fall apart if users
> disabled both JavaScript & CSS and reconcile that with your statement
> above.

As I suspected, you didn't get the point at all. Regardless, most Web
applications (and many simple Web pages) fall apart when both JS and
CSS are disabled. Name three "major Web applications" that don't.

>
>
>
> > > > > * Allow configuring the delay for closing the menu after mousing out
> > > > > of the menu
>
> > > > That doesn't make sense to me for a hierarchical menu.
>
> > > It makes even more sense for a hierarchical menu. Consider navigating
> > > through a complicated menu structure via hovering, then right before
> > > you click the appropriate entry, you accidentally move the mouse too
> > > far and the whole menu closes. That's the scenario (typically found on
> > > CSS-only menus) I want to avoid, so I'd like a "grace period" if you
> > > will.
>
> > I didn't mean the delay made no sense, but the usual rollover-only
> > functionality of canned menu scripts.
>
> I can see you have many opinions. It's a pity none of them have to do
> with the original request.

The original request matters little at this point. As I mentioned a
few posts back, I have no recommendation for you, other than a few
general rules to follow when evaluating canned menu scripts.

Re: Recommendations for JavaScript drop-down menu code
 

Brian Adkins wrote:
> I would appreciate recommendations for JavaScript code that implements
> drop-down, hierarchical menus. Are there high quality libraries for
> this, or is it more typical for people to roll their own?

Let JScript(!) code add to the functionality of CSS where required. Don't
attempt to replace HTML and the latter by a client-side script that
generates the content; the result would be inevitably inaccessible.


PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 28, 11:40 am, David Mark <dmark.cins...@gmail.com> wrote:
> On Sep 28, 2:12 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
>
>
>
> > On Sep 28, 1:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > > On Sep 28, 1:49 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > > > On Sep 27, 12:53 pm, David Mark <dmark.cins...@gmail.com> wrote:
> > > > > On Sep 27, 12:04 pm, Brian Adkins <lojicdot...@gmail.com> wrote:
> > > > > > Ideally, the code would:
> > > > > > * Allow configuring horizontal or vertical menus
>
> > > > > That is a function of CSS, not script.
>
> > > > There are a number of ways of accomplishing this. CSS is one way, but
> > > > the JavaScript code can make CSS styling less difficult or more
> > > > difficult.
>
> > > How so? Your app must not break down when either or both is disabled.
>
> > "Must not" ? I'm surprised you think you know enough about the
> > requirements for my application to be able to make this statement. The
>
> It has nothing to do with the requirements of your application.
> That's a general rule for any competent Web page or application.

It does have to do with the specific requirements. Not all web pages
are for general web consumption. Some are for back-end pages where the
user logs in and is known to have a certain set of prerequisite
capabilities. In these cases, spending the extra time to make the page
degrade gracefully or otherwise may not be considered a wise use of
development dollars.

Another option is a gateway page that branches to two versions of the
application. This is like GMail. One branch is for JavaScript enabled
(and sufficiently capable JavaScript) and the other branch is for
anyone not capable of the "full" version. So in this case the fancy
drop down menus would not have to degrade either.

Peter

Re: Recommendations for JavaScript drop-down menu code
 

Here are a few I've found. Any good/bad experiences with any of them?

Yahoo! UI Library: Menu
http://developer.yahoo.com/yui/menu/

Son of Suckerfish - Nice, but menu collapses unforgivingly
http://www.htmldog.com/articles/suckerfish/dropdowns/

FreeStyle Menu - Angus Turnbull
http://www.twinhelix.com/dhtml/fsmenu/demo/

jdMenu plugin for JQuery
http://jdsharp.us/jQuery/plugins/jdMenu/

I also forgot to list one requirement. I'm using XHTML 1.0 Strict, so
the menu would need to be compatible with that.

At this point, I'm leaning toward starting with Son of Suckerfish and
adding JavaScript to make the collapsing more forgiving. It seems like
the simplest and I like the idea of building something onto a simple
foundation versus trying to understand someone else's monstrosity.

I would be curious about experiences with Yahoo's menu or other
libraries with significant developer acceptance.

Re: Recommendations for JavaScript drop-down menu code
 

On Sep 29, 4:07 pm, Randy Webb <HikksNotAtH...@aol.com> wrote:
> Brian Adkins said the following on 9/29/2007 12:51 PM:
> > I also forgot to list one requirement. I'm using XHTML 1.0 Strict, so
> > the menu would need to be compatible with that.
>
> Why are you using something that isn't understood by 90% of the web and
> would end up being processed as soup tag HTML and thus a true XHTML
> script wouldn't work with it?

I wasn't aware that "90% of the web" doesn't understand it. Can you
provide documentation for that statistic? I have to admit being
skeptical since my testing has uncovered no issues and there are a
number of major sites using the same doctype, but I'd like to keep an
open mind.

I'm not familiar with the phrase "soup tag HTML", but it doesn't sound
good. Which browsers process XHTML as "soup tag HTML" ? I also don't
know what you mean by a "true XHTML script" - is this different than a
regular old JavaScript script? Are you saying that many browsers will
populate the DOM differently from XHTML input than from HTML? If you
can provide examples of input that validates against XHTML 1.0 Strict
that turns into "soup tag HTML" and thus won't work with a valid
JavaScript program I would appreciate it.

Just out of curiosity, which doctype do you prefer?