I would like to create a vertical cascading menu using javascript and css - looking for guidelines

[Terry]

Hi folks.

I am trying to create a vertical cascading menu.

It seems from what I am reading that I should use unordered nested
lists. I came across
http://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm

but it seems rather diffcult to understand.

I have been told that my implementation should use addEventListener
but other than that I don't where else to start.

Thanks in advance for your help,
Terry

 

[David Mark]

Hi folks.

I am trying to create a vertical cascading menu.

It seems from what I am reading that I should use unordered nested
lists. I came acrosshttp://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm

Don't use anything from that site. I looked at this briefly and the
CSS has accessibility and compatibility issues. I didn't look at the
script, but most posted to that site are of very low quality.

I threw this together in response to a recent query.

http://code.google.com/p/nicemenus/

Turns out there already is a script called NiceMenus (or Nice_Menus),
but I doubt it is quite as nice.

There's no documentation at the moment, but the sample pages and
script should get you started. Let me know if you have any questions
or issues.

 

[TriFuFoos]

How can you tell there are compatibility issues by just looking at
css?

I'm trying to learn how to write better css so it is cross browser
compliant, however,
I don't know what's different in different browsers?

 

[Terry]

Don't use anything from that site. I looked at this briefly and the
CSS has accessibility and compatibility issues. I didn't look at the
script, but most posted to that site are of very low quality.

I threw this together in response to a recent query.

http://code.google.com/p/nicemenus/

Turns out there already is a script called NiceMenus (or Nice_Menus),
but I doubt it is quite as nice.

There's no documentation at the moment, but the sample pages and
script should get you started. Let me know if you have any questions
or issues.

Thanks I will look at it in a bit. Too bad I did not post my message
and get your response earlier. As I already put out $12.00 for the pro
version.

Are there any basic guidelines that I should be following?

Thanks,
Terry

 

[David Mark]

Thanks I will look at it in a bit. Too bad I did not post my message
and get your response earlier. As I already put out $12.00 for the pro
version.

Ouch. What extra does the "pro" version offer? Regardless, I doubt
you want any version of that thing.

Are there any basic guidelines that I should be following?

For starters you need a script that will enhance an existing hierarchy
of nested lists. That script does that, but for some strange reason,
its behavior is triggered by the CSS class names of the lists. This
is no good as it is unlikely that you want your lists to look like
menus when scripting is disabled (or the browser is incapable of
handling popup menus.) You'll see in my samples that the initial
class names of the top-level lists are "menu", and when and if menus
are initialized, they are changed to "menubar." Options such as
special effects are specified by your script, not through a series of
CSS class names.

Also, you should be able to navigate the menus with the keyboard,
which seemed to be impossible in the posted demo.

Peronally, I think initial top-level navigation should be triggered by
clicks (or the enter key), not rollovers. I made this an option in my
script.

I should also mention that the project is only a few days old and has
not been tested with IE5 or any version of Mac IE. Versions prior to
IE5 won't be a problem as the menus will just degrade to static
lists. That reminds me that I need to test Netscape 6.

 

[David Mark]

[snip]

lists. That reminds me that I need to test Netscape 6.

NN6 is a go, though the specific combination of effects used in the
sample pages weren't very pretty on menus that fly out from the left.
Drop downs were fine. I find this odd as I had a similar issue with
other effects related to nested popup menus in certain browsers (noted
in the issues section of the project page.) So if you need to have
fly out menus or nested popup menus with special effects, it is best
to stick with the fade effect. I have no idea why this is, but the
various browsers all have odd quirks when it comes to rendering nested
lists, especially when animations are involved.

 

[Terry]

I should also mention that the project is only a few days old and has
not been tested with IE5 or any version of Mac IE. Versions prior to
IE5 won't be a problem as the menus will just degrade to static
lists. That reminds me that I need to test Netscape 6.- Hide quoted text -

I just tried your menus and I must say I like it. I have not looked
at the code as of yet. What do I have to do to make it work in IE5.01
and IE5.5.

Thanks,
Terry

 

[David Mark]

I just tried your menus and I must say I like it. I have not looked
at the code as of yet. What do I have to do to make it work in IE5.01
and IE5.5.

You don't have to do anything and I am not certain that the script/CSS
will have problems in IE5.x. I just haven't tested with these
browsers as of yet. Considering all of the CSS-related headaches I
had to deal with to get IE6/7 right, I figure there will be something
to deal with in IE5, Mac IE, etc.

If you do try this in older versions of IE and have problems, let me
know...

 

[Terry]

You don't have to do anything and I am not certain that the script/CSS
will have problems in IE5.x. I just haven't tested with these
browsers as of yet. Considering all of the CSS-related headaches I
had to deal with to get IE6/7 right, I figure there will be something
to deal with in IE5, Mac IE, etc.

If you do try this in older versions of IE and have problems, let me
know...

I just tried it in with IE5.01 and IE5.5 and it did not work.

I am trying to emulate the menu that is at http://cs-graphicdesign.com/

Thanks,
Terry

 

[David Mark]

I just tried it in with IE5.01 and IE5.5 and it did not work.

You'll have to be more specific. I can tell you that adding fixed
widths to the popup menus (menuPopup class) fixed virtually all of the
effect issues for nested popups. It fixed the NN6 issue as well.

Are you having display issues or was there a problem with the script?
I suspect it is the former. Email me for further help or download the
archive I just sent up (I changed it to use the fade effect alone on
the sample pages) and see if it changes anything.

I am trying to emulate the menu that is athttp://cs-graphicdesign.com/

Then turn off the effects altogether. See the sample script. You'll
need to comment one line.

 

[Terry]

You'll have to be more specific. I can tell you that adding fixed
widths to the popup menus (menuPopup class) fixed virtually all of the
effect issues for nested popups. It fixed the NN6 issue as well.

I tried your script without the horizontal menu. I took out the popup
menu as well.

I was not able to get the secondary menus in IE5.5.
Unfortunately, my IE5.01 browser is not working right now. So I don't
know for sure if it is working there or not.

Then turn off the effects altogether. See the sample script. You'll
need to comment one line.

Which line do I have to comment out?

Thanks,
Terry

 

[David Mark]

I just tried it in with IE5.01 and IE5.5 and it did not work.

I am trying to emulate the menu that is athttp://cs-graphicdesign.com/

Fixed widths for popup menus are the key. BTW, I fixed the clipping
problem for good. For those interested, these four statements are not
equivalent:

el.style.clip = 'auto'; // Works for all but IE
el.style.clip = '(auto auto auto auto)'; // Works for IE
el.style.clip = '(auto, auto, auto, auto)'; // Works for most (not
Opera 9)
el.style.clip = '(0 100% 100% 0)'; // Bad workaround for IE

 

[Terry]

Fixed widths for popup menus are the key. BTW, I fixed the clipping
problem for good. For those interested, these four statements are not
equivalent:

el.style.clip = 'auto'; // Works for all but IE
el.style.clip = '(auto auto auto auto)'; // Works for IE
el.style.clip = '(auto, auto, auto, auto)'; // Works for most (not
Opera 9)
el.style.clip = '(0 100% 100% 0)'; // Bad workaround for IE

The problems that I am experiencing with IE5 are not with the popup
menu. It is with the vertical menu. Clicking or mouseing over does
not produce the cascaded menu in IE5.

Terry

 

[David Mark]

The problems that I am experiencing with IE5 are not with the popup
menu. It is with the vertical menu. Clicking or mouseing over does
not produce the cascaded menu in IE5.

Terry

The cascaded menus are popup menus (class menuPopup.) But I get what
you mean.

Turn off special effects (or just use the fade effect) and see if that
fixes it. See the sample script.

Please email any further questions about the menus. This discussion
is off-topic here.

 

[Thomas 'PointedEars' Lahn]

How can you tell there are compatibility issues by just looking at
css?

Experience. (That was easy.)

I'm trying to learn how to write better css so it is cross browser
compliant,

Good luck; you are going to need it. Sarcasm aside, there are far too many
browser quirks/bugs to achieve that. You can make it work in a subset of a
handful CSS-capable-or-so layout engines; most of the time by adhering to
Web standards (first write *Valid* CSS), but sometimes by doing the exact
opposite (like proprietary JScript expressions in stylesheets to fix
`bottom' and `position: fixed' for IE 6).

however, I don't know what's different in different browsers?

Much you have to learn, young apprentice.[tm] For a start, why have you
not yet considered simply to *test* your CSS code in different browsers?

However, general CSS discussions are off-topic here.
Try comp.infosystems.www.authoring.stylesheets instead.

Please read the FAQ of this newsgroup on how to quote correctly in Usenet, too.


Yoda^WPointedEars