Results 1 to 7 of 7

Thread: All Levels Navigational Menu - .selected class

  1. #1
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy All Levels Navigational Menu - .selected class

    1) Script Title: All Levels Navigational Menu (v1.31)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

    3) Describe problem:

    The only problem I have is the class ".selected".
    If I set a menu item to class .selected it appears selected according to my CSS styles... so far so good.

    If it is a menu item that has no child elements it is no problem to hover the item. The item is still .selected. Now: In case it is a menu item with a submenu the class .selected disappears by just hover it with the mouse.

    Only after clicking it again it is .selected


    Something in the JS might change the class by just hover the item. Is that a bug?

    Thanks in advance!

    Guido

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I'm not sure I get the picture entirely yet. Does the same problem occur with the DD demo as well? The .selected class must be defined on the A element itself in order for the script to correctly apply/unapply it to the menu items.

    Please post a link to the page on your site that contains the problematic script so we can check it out.

  3. #3
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi there,

    in the demo you cannot check this issue because there is no .selected class used.

    here is my link:
    http://www.topatec.de/_neu/

    the two links with a submenu doesn't stay selected if i hover them...

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmmm testing the link you posted, I still don't understand the issue. I assume your .selected class gives the menu item a gray background and red text color right? Hovering over the two menu items that contain a drop down, they both get that treatment until the mouse rolls out of them as expected.

  5. #5
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, I try to explain...

    I click on "Unternehmen" - the button is gray (.selected) - fine.

    Then I just hover it and the active class disappears...

    The button doesn't stay as .selected. That ist the issue.



    I've tested this in all browsers so I guess it is a bug in the JS.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Ok I see what you mean. This occurs because you're using the same ".selected" class to permanently highlight the menu item pertaining to the current page. What you should do is create a separate class for that, such as ".currentpage", which may merely be a duplicate of ".selected".

    BTW, in FF2, there is a z-index issue with your drop downs causing them to disappear as soon as the mouse rolls over them. You should try moving the drop down menus' HTML to the very bottom of your page (right above the </body> tag):

    Code:
          <!-- Top Drop Down Menu 1 HTML -->
          <ul id="ddsubmenu1" class="ddsubmenustyle">
            <li><a href="topatec-unternehmen.html">Wir &uuml;ber uns</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
          </ul>
          <!-- Top Drop Down Menu 2 HTML -->
          <ul id="ddsubmenu2" class="ddsubmenustyle">
    
            <li><a href="wasseraufbereitung.html">Wasseraufbereitung</a></li>
            <li><a href="abwassertechnik.html">Abwasserbehandlung</a></li>
            <li><a href="reinigungstechnik.html">Waschtechnik</a></li>
            <li><a href="regenwassernutzung.html">Regenwassernutzung</a></li>
            <li><a href="fettabscheider.html">Fettabscheider</a></li>
            <li><a href="abscheidertechnik2.html">Benzinabscheider</a></li>
    
            <li><a href="abscheidertechnik2.html">Koaleszenzabscheider</a></li>
          </ul>
          <!-- end navigation -->
    
    </body>

  7. #7
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much!

    Now it works great! I didn't check FF2 before (only FF3), but now I changed the submenus position as well.

    The menu is just great and highly customizable.

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
  •