Newbie expand/collapsible menu problem

Discussion in 'Javascript' started by Justin C, Oct 14, 2009.

  1. Justin C

    Justin C Guest

    I'm very new to JavaScript and am only picking stuff up from reading
    other's code, I've not yet bought a book (there being a lack of
    concensus on which are good not being helpful! - at least, according to
    the FAQ).

    I have a menu on a web-site that is getting large and difficult to
    navigate as it has too many items in it. To make navigation easier I
    thought I'd reduce the number of items by having JS expand/collapse
    sub-menus. The problem I'm having is that the menus collapse before I
    can get the mouse to the links in sub-menus.

    I've tried various <span> and <div> elements to enclose the sub-menus
    and have the mouseOut attached to external <[span|div]> elements, but I
    don't seem to be able to get the sub-menus to be usable.

    What I need is the sub-menus to not collapse until the mouse moves
    beyond the bottom of the sub-menu itself.

    Here's my code, it's as concise as I'm able to make it. Any tips or
    pointers on how to make my menus work will be greatly appreciated.

    <head>
    </head>
    <body>
    <a onMouseOver="expand(refData, 0); return false"
    onMouseOut="collapse(refData, 0); return false" href="#">
    Reference Data</a>
    <span id="refData"></span>
    <br />
    <a onMouseOver="expand(progs, 1); return false"
    onMouseOut="collapse(progs, 1); return false"
    href="#">Programs</a>
    <span id="progs" ></span>

    <script language="javascript">
    var toggle = new Array();
    var menushover = new Array();

    menushover[0] = "<br />--&gt;<a href=\"#\">PDF Forms</a> \
    <br /> --&gt;<a href=\"#\">Bank charges</a> <br /> --&gt; \
    <a href=\"#\">Company Details</a>";

    menushover[1] = "<br />--&gt;<a href=\"#\">Account \
    Application</a> <br />--&gt;<a href=\"#\">Customs \
    Invoices</a> <br />--&gt; <a href=\"#\">Excel \
    Converter</a>";

    menu_counter = 2;

    for (i = 0; i < menu_counter; i++){
    toggle = 0;
    }

    function expand(menu, menu_number) {
    if (toggle[menu_number] == 0){
    menu.innerHTML=menushover[menu_number];
    toggle[menu_number]=1;
    }
    }

    function collapse(menu, menu_number) {
    if (toggle[menu_number] == 1){
    menu.innerHTML = "";
    toggle[menu_number] = 0;
    }
    }
    </script>

    </body>
    </html>

    Justin.

    --
    Justin C, by the sea.
    Justin C, Oct 14, 2009
    #1
    1. Advertising

  2. Justin C wrote:

    > [...]
    > What I need is the sub-menus to not collapse until the mouse moves
    > beyond the bottom of the sub-menu itself.
    >
    > Here's my code, it's as concise as I'm able to make it. Any tips or
    > pointers on how to make my menus work will be greatly appreciated.
    >
    > <head>
    > </head>
    > <body>
    > <a onMouseOver="expand(refData, 0); return false"
    > onMouseOut="collapse(refData, 0); return false" href="#">
    > Reference Data</a>
    > <span id="refData"></span>
    > <br />


    1. <http://validator.w3.org/>

    2. Write your menus using unordered lists that contain unordered lists so
    that the menu items work without scripting and those users and search
    engines can find your content.

    From there it is not far to a menu that also works in IE 6, because that is
    probably the only browser you need scripting for to do this. (Probably all
    other browsers are happy with CSS using li:hover selectors.)

    Google is your friend. [psf 6.1]


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Oct 14, 2009
    #2
    1. Advertising

  3. Justin C

    Justin C Guest

    On 2009-10-14, Thomas 'PointedEars' Lahn <> wrote:
    > Justin C wrote:
    >
    >> [...]
    >> What I need is the sub-menus to not collapse until the mouse moves
    >> beyond the bottom of the sub-menu itself.
    >>
    >> Here's my code, it's as concise as I'm able to make it. Any tips or
    >> pointers on how to make my menus work will be greatly appreciated.
    >>
    >> <head>
    >> </head>
    >> <body>
    >> <a onMouseOver="expand(refData, 0); return false"
    >> onMouseOut="collapse(refData, 0); return false" href="#">
    >> Reference Data</a>
    >> <span id="refData"></span>
    >> <br />

    >
    > 1. <http://validator.w3.org/>
    >
    > 2. Write your menus using unordered lists that contain unordered lists so
    > that the menu items work without scripting and those users and search
    > engines can find your content.
    >
    > From there it is not far to a menu that also works in IE 6, because that is
    > probably the only browser you need scripting for to do this. (Probably all
    > other browsers are happy with CSS using li:hover selectors.)


    That all looks good, thank you. Luckily I don't need to worry about IE6,
    the site is inhouse, and we're all Mac and *nix, we don't allow
    Windows[1] in the building.

    Anyway, looks like I don't need JS at all! There goes my learning a new
    language!

    Thanks again for the pointer.

    Justin.


    1. Apart from those that let in the light, which obviously discounts the
    MS product of that name.

    --
    Justin C, by the sea.
    Justin C, Oct 15, 2009
    #3
  4. Justin C wrote:

    > Anyway, looks like I don't need JS at all! There goes my learning a new
    > language!


    Well, you still need to learn CSS :)

    > Thanks again for the pointer.


    You're welcome.


    PointedEars

    P.S.
    Very funny posting; headers, content and sig altogether. Thx for the humor.
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Oct 15, 2009
    #4
  5. Justin C

    Justin C Guest

    On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
    > Justin C wrote:
    >
    >> Anyway, looks like I don't need JS at all! There goes my learning a new
    >> language!

    >
    > Well, you still need to learn CSS :)


    Are you making disparaging remarks regaring my CSS ability?! Oh, you've
    seen my work...


    > P.S.
    > Very funny posting; headers, content and sig altogether. Thx for the humor.


    I have no idea what you mean. It all looks OK here in slrn. Unless you
    are referring to the accepted/usual posting style/etiquette here, of
    which I am not really familiar.

    Justin.

    --
    Justin C, by the sea.
    Justin C, Oct 15, 2009
    #5
  6. Justin C wrote:

    > On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
    >> P.S.
    >> Very funny posting; headers, content and sig altogether. Thx for the
    >> humor.

    >
    > I have no idea what you mean. It all looks OK here in slrn. Unless you
    > are referring to the accepted/usual posting style/etiquette here, of
    > which I am not really familiar.


    I was referring to your posting's `Organization' header, your reference to
    the ambiguity of `windows', and your signature `... C, by the sea', which
    are all OK, and very funny (as in "fun") too.


    Regards,

    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> (404-comp.)
    Thomas 'PointedEars' Lahn, Oct 15, 2009
    #6
  7. Justin C

    Justin C Guest

    On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
    > Justin C wrote:
    >
    >> On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
    >>> P.S.
    >>> Very funny posting; headers, content and sig altogether. Thx for the
    >>> humor.

    >>
    >> I have no idea what you mean. It all looks OK here in slrn. Unless you
    >> are referring to the accepted/usual posting style/etiquette here, of
    >> which I am not really familiar.

    >
    > I was referring to your posting's `Organization' header, your reference to
    > the ambiguity of `windows', and your signature `... C, by the sea', which
    > are all OK, and very funny (as in "fun") too.


    Ah! There was me being a little hard-of-understanding again. Thanks for
    the comments.

    Justin.

    --
    Justin C, by the sea.
    Justin C, Oct 15, 2009
    #7
    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. ste
    Replies:
    11
    Views:
    34,809
    nobbiesp
    Jul 5, 2010
  2. Jonathan
    Replies:
    5
    Views:
    657
    BootNic
    Jan 6, 2007
  3. madhur
    Replies:
    0
    Views:
    385
    madhur
    May 20, 2007
  4. Replies:
    1
    Views:
    97
  5. Replies:
    0
    Views:
    210
Loading...

Share This Page