Results 1 to 6 of 6

Thread: AnyLink Drop Down Menu - Highlight Parent Link

  1. #1
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu - Highlight Parent Link

    Script: AnyLink Drop Down Menu
    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    Hi,

    I am using this script successfully but i would like the parent link to be highlighted when the menu pops up, for clarity.

    So, for example if i have this:

    <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a>

    Clicking on "New Sites" will display the menu and i would like this hightlighted (using my css definitions). Obviously i could use a:active but the problem is it doesn't clear itself when i move off the menu and elsewhere...

    Please could some one help me in modifying this.

    Many thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I have a feeling you are looking for more than this but, the way you describe it, this will work and may be all you really want (I'm no mind reader). OK, define two classes in the style section for the items you want highlighted - one for the normal state, the other for the highlighted state. These classes can be whatever you want and include whatever definitions you want but, an example is:
    Code:
    .anyNorm {
    background:white;
    }
    .anyHlight {
    background:lightblue;
    }
    Then (from your example):
    HTML Code:
    <a class="anyNorm" href="default2.htm" onClick="this.class='anyHlight';return dropdownmenu(this, event, menu2, '200px')" onMouseout="this.class='anyNorm';delayhidemenu()">News Sites</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is exactly what i want but unfortunately it does not work, it seems to break the code and the menu does not display...

    Are there any other options?

    Thanks.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I made a booboo, sorry. The whole idea is fine but I wrote the events wrong. Use this for the HTML part of this scheme instead:
    Code:
    <a class="anyNorm" href="default2.htm" onClick="this.className='anyHlight';return dropdownmenu(this, event, menu2, '200px')" onMouseout="this.className='anyNorm';delayhidemenu()">News Sites</a>
    Basically it should have been 'this.className=' not 'this.class='.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks - that works a treat. I should have noticed that myself!

  6. #6
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK, for various reasons i have had to switch to:

    AnyLink CSS Menu
    http://www.dynamicdrive.com/dynamici...anylinkcss.htm

    and unfortunately your previous method does not work with that, since (for some reason) the onMouseOut does not reset the className.

    Anyhow, what i would really like to do is go a bit further still and to trap the parent link (the "anylink") for the dropdown menu (something like "dropmenuobj.parentElement" - or whatever, i do not really know) and slip this into the code somehow by creating two variables called "parentClassOn" "parentClassOff", each being assigned a css class.

    By doing the above i could then do something like the following:


    var parentClassOn = On
    var parentClassOff = Off

    ...

    /* in the function to display the menu add the following */
    dropmenuobj.parentElement.className = parentClassOn

    ...

    /* in the function to hide the menu add the following */
    dropmenuobj.parentElement.className = parentClassOff

    This would (i belive) improve the menu somewhat as it would act more like other menus that do display the parent link as highlighted.

    Please could you (jscheuer1) or someone help me with this.

    Many thanks in advance.

    M

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •