• Hi WordPress team

    I would like to to make a custom version of the menu but that is much harder then i imagined.

    Picture the classic menu structure in e.g. windows explorer where you click a folder and it expands but the remaining folder are collapsed. I would like to do something similar to that. When i click an item on level 1 i will see items in level 1 and level2, then i click an item in level 2 and i see level 1, level 2 and level 3.
    In other words only showing leafs belonging to the branch i’m walking

    lev1-1 lev1-2 lev1-3
    lev2-1 lev2-2 lev2-3 lev2-4
    lev3-1 lev3-2 lev3-3

    Can someone point me to something useful?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What are you stuck with?

    Thread Starter Cyberish

    (@cyberish)

    well i’ve had a look at wp_nav_menu and how to extend it, but i dont know how to cut branches of, and also how to stop the expansion at a given level

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which theme are you working with?

    Thread Starter Cyberish

    (@cyberish)

    its more or less my own theme using the cherry framework 3.x

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The wp_nav_menu function with its default parameters will not limit the menu to a certain depth; https://developer.www.ads-software.com/reference/functions/wp_nav_menu/

    You can control the depth of the menu through the $depth parameter. For example to assert a depth of 4 levels:

    <?php 
    
    $arguments = array(
        'depth' => 4
    );
    
    wp_nav_menu($arguments); 
    
    ?>

    Thread Starter Cyberish

    (@cyberish)

    yes that i do know, but i need the depth to be variable, how do i know the level and branch for the selected item?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It sounds like you don’t need a depth and are facing a CSS issue. A typical navigation menu will only show the submenu items one level at a time, for example CSS:

    .menu ul ul {
        display: none;
    }
    
    .menu ul li:hover > ul {
        display: block;
    }

    The greater than character (>) is used to represent a ‘direct descendent’ relationship of the proceeding character. In your case the CSS wouldn’t be on hover.

    Thread Starter Cyberish

    (@cyberish)

    First of let me remind you that i’m not talking about at normal dropdown-menu, but a dynamic menu stucture
    So lets say i’m using css, i still would need to to know what branch to show and hide, hence i would need to modify the css on the fly either by php or javascript

    I know i could solve my problem with javascript, but would like to try a server-side version

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So the menu you’re creating doesn’t have a typical menu-child relationship? That’s what a normal navigation menu has:
    – Parent item
    — Child item

    Can I ask, what have you got at the moment? It sounds a bit up-in-the-air.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    When I say “menu-child relationship”, note that this is only what is relevant for CSS. The HTML should already be rendered in the page. At the CSS stage, you don’t care what is shown in the menu items, you only care about the HTML relationships.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Walking down a branch’ is closed to new replies.