SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a 3 level accordion menu

    Hi and thanK you in advance for your help.

    I have created a 3 level menu in wordpress and wp_nav_menu

    so in my theme i get something like this

    <ul id="menu" class="menu">
    <li><a>Sub item A</a>
    <ul class="submenu">
    <li>sub sub item a</li>
    <li>sub sub item b</li>
    <li>sub sub item c</li>
    </ul>
    </li>

    <li><a>Sub item b</a>
    <ul class="submenu">
    <li>sub sub item e</li>
    <li>sub sub item f</li>
    <li>sub sub item g</li>
    </ul>
    </li>
    </ul>


    And I use this jquery to make it behave like an accordion

    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    $('#menu li a').click(
    function() {
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    return false;
    }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#menu ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
    return false;
    }
    }
    );
    }
    $(document).ready(function() {initMenu();});

    .current_page_item is the class that wordpress automatically assigns to the current menu item, and I use the above jquery code to make the First level submenu to appear a selected and open when the user navigates in the current page

    But when user is selecting a second level menu although the second level list is expanded the first level hides again....

    This is a newbie javascript question, please some advice will be hellpfull

    Thank you in advance

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Can you help me understand your problem better? The first thing I did was correct your .sub-menu class (notice the hyphen in your JavaScript versus no-hypen in your HTML).

    Doing so, I get the following:
    http://jsfiddle.net/mgSf3/3/

    As far as I can tell, it seems to work, what exactly is it that you need help with?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it works for the second level but not for the third level menu

    http://jsfiddle.net/mgSf3/6/

    the third level expands but the second level hides again!

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Okay, problem fixed. In short, your #menu ul:visible was targeting ALL menus that were visible (including the parent of a sub-item). I added .not(checkElement.parent().parent()). Now this works for 3 levels, may not work for 4 levels.

    http://jsfiddle.net/bKdmV/2/

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works!!!!

    Thank you so much!

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing if you can help when i click the let say the
    sub sub sub item c

    how can i keep the accordion open?

    probably using css i suppose

  7. #7
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Okay, I just figured out about parentsUntil() which will let it work for infinite number of levels
    http://jsfiddle.net/4JusM/4/

  8. #8
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by satsilem View Post
    One more thing if you can help when i click the let say the
    sub sub sub item c

    how can i keep the accordion open?

    probably using css i suppose
    So it redirects to another page, and you want it to automatically open up all the way to sub sub sub item c right?

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes thats it

  10. #10
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Does the URL match the HREF value of sub sub sub item c?

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it also gets a css class li class=current-menu-item

    and the parent li the class=current-page-ancestor

  12. #12
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    See the following:
    http://jsfiddle.net/4JusM/6/

    I added the following line:
    Code:
    $('.current-menu-item').parentsUntil('#menu').slideDown('normal');

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes!!! it works !!!!!!

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much

  15. #15
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Your welcome.

  16. #16
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice work cpradio.

    For educational purposes, what needs to be added so that you can retain the functionality of the menu, but you can toggle the slideup/down functionality?

    Currently, if an element is active you can't click it to toggle the slide function, you have to click a different element to get it to slide up.

  17. #17
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,810
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Change
    Code JavaScript:
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
            }

    To be:
    Code JavaScript:
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                checkElement.slideUp('normal');
                return false;
            }

    As seen here: http://jsfiddle.net/4JusM/44/
    Be sure to congratulate xMog on earning April's Member of the Month
    Go ahead and blame me, I still won't lose any sleep over it
    My Blog | My Technical Notes

  18. #18
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Superb.

    Guess I was over-thinking it.

    Great job!


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
  •