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

Discussion in 'Javascript' started by Terry, Oct 4, 2007.

  1. Terry

    Terry Guest

    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
     
    Terry, Oct 4, 2007
    #1
    1. Advertising

  2. Terry

    David Mark Guest

    On Oct 4, 2:06 pm, Terry <> wrote:
    > 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.
     
    David Mark, Oct 4, 2007
    #2
    1. Advertising

  3. Terry

    Guest

    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?
     
    , Oct 4, 2007
    #3
  4. Terry

    Terry Guest

    On Oct 4, 3:21 pm, David Mark <> wrote:
    > 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
     
    Terry, Oct 4, 2007
    #4
  5. Terry

    David Mark Guest

    On Oct 4, 3:33 pm, Terry <> wrote:
    > On Oct 4, 3:21 pm, David Mark <> wrote:
    >
    > > 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.


    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, Oct 4, 2007
    #5
  6. Terry

    David Mark Guest

    On Oct 4, 4:05 pm, David Mark <> wrote:

    [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.
     
    David Mark, Oct 4, 2007
    #6
  7. Terry

    Terry Guest

    On Oct 4, 4:05 pm, David Mark <> wrote:

    > 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
     
    Terry, Oct 4, 2007
    #7
  8. Terry

    David Mark Guest

    On Oct 4, 5:25 pm, Terry <> wrote:
    > On Oct 4, 4:05 pm, David Mark <> wrote:
    >
    > > 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.


    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...
     
    David Mark, Oct 4, 2007
    #8
  9. Terry

    Terry Guest

    On Oct 4, 5:43 pm, David Mark <> wrote:
    > On Oct 4, 5:25 pm, Terry <> wrote:
    >
    > > On Oct 4, 4:05 pm, David Mark <> wrote:

    >
    > > > 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.

    >
    > 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
     
    Terry, Oct 4, 2007
    #9
  10. Terry

    David Mark Guest

    On Oct 4, 6:10 pm, Terry <> wrote:
    > On Oct 4, 5:43 pm, David Mark <> wrote:
    >
    >
    >
    >
    >
    > > On Oct 4, 5:25 pm, Terry <> wrote:

    >
    > > > On Oct 4, 4:05 pm, David Mark <> wrote:

    >
    > > > > 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.

    >
    > > 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.
    >


    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.
     
    David Mark, Oct 4, 2007
    #10
  11. Terry

    Terry Guest

    On Oct 4, 6:58 pm, David Mark <> wrote:
    > 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.

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

    >
    > 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
     
    Terry, Oct 5, 2007
    #11
  12. Terry

    David Mark Guest

    On Oct 4, 6:10 pm, Terry <> wrote:
    >
    > 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
     
    David Mark, Oct 5, 2007
    #12
  13. Terry

    Terry Guest

    On Oct 4, 7:51 pm, David Mark <> wrote:
    > On Oct 4, 6:10 pm, Terry <> wrote:
    >
    >
    >
    > > 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


    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
     
    Terry, Oct 5, 2007
    #13
  14. Terry

    David Mark Guest

    On Oct 4, 7:56 pm, Terry <> wrote:
    > On Oct 4, 7:51 pm, David Mark <> wrote:
    >
    >
    >
    >
    >
    > > On Oct 4, 6:10 pm, Terry <> wrote:

    >
    > > > 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

    >
    > 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.
     
    David Mark, Oct 5, 2007
    #14
  15. Re: I would like to create a vertical cascading menu using javascriptand css - looking for guidelines

    wrote:
    > 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
    --
    "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>
     
    Thomas 'PointedEars' Lahn, Oct 5, 2007
    #15
    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. Framework fan
    Replies:
    2
    Views:
    9,216
    Framework fan
    Dec 2, 2003
  2. Geoff Winsor
    Replies:
    3
    Views:
    4,610
    Roedy Green
    Jul 7, 2004
  3. Nico Schuyt

    CSS menu vertical

    Nico Schuyt, Oct 16, 2004, in forum: HTML
    Replies:
    8
    Views:
    1,149
    brucie
    Oct 16, 2004
  4. UnixUser
    Replies:
    1
    Views:
    343
    Irrwahn Grausewitz
    Dec 15, 2003
  5. Alex
    Replies:
    2
    Views:
    1,783
    Ben C
    Mar 30, 2007
Loading...

Share This Page