0

looking and trying for hours to find a solution for the following output of a wordpress custom menu. Hope you can help. I do not know where to start: custom menu walker, css, functions.php

I have a custom menu with "individual links" (so no pages or posts or categories) with Link and Link-Text. Right now depth is 5 (could be 6,7.. in the future).

Example menu:

Sport
   Bike
     Bikeparts
       Seats
         Mountainbike
         Roadbike
       Breaks
         Break Levers
         Adapters
     Bike Add Ons
       Bottle Holder
   Water
     Stand Up Paddling
       Paddel
       Boards
   Air
     Wingsuits 
Automotive
  car
  motorbike
Tools

What should it be: See following scenarios: Default View on main page (depth 0):

Sport
Automotive
Tools

Click on "Sport":

Sport (bold)
   Bike
   Water
   Air
Automotive
Tools

Click on "Bike":

Sport (bold)
   Bike (bold)
     Bikeparts
     Bike Add Ons
   Water
   Air
Automotive
Tools

Click on "Bikeparts":

Sport (bold)
   Bike (bold)
     Bikeparts (bold)
       Seats
       Breaks
     Bike Add Ons
Automotive
Tools

Click on "Breaks":

Sport (bold)
   Bike (bold)
     Bikeparts (bold)
       Seats
       Breaks (bold)
         Break Levers
         Adapters
Automotive
Tools

Click on "Break Levers":

Sport (bold)
   Bike (bold)
     Bikeparts (bold)
       Breaks (bold)
         Break Levers (bold)
         Adapters
Automotive
Tools

So you see from Depth 1 if you start depth at 0 (step: click on Bike) and deeper you will always see all depth 0 menu items (sport, automotive, Tools), all siblings from this active menu item (bike) under active parent (sport) and all children of active menu item (bike).

What i have right now is the solution from https://christianvarga.com/how-to-get-submenu-items-from-a-wordpress-menu-based-on-parent-or-sibling/ where i replaced:

} else if ( ! ( isset( $args->show_parent ) && in_array( $item->ID, $menu_item_parents ) ) ) {

with

} else if ( ! empty( $item->menu_item_parent ) ) {

So right now it works only with the first level. if i click on sport i do not see submenu from automotive.

I hope anybody can help.

Thanks in advance

  • 1
    What you want sounds like it can be described by 2 simple rules, and to be honest this could be done entirely with pure CSS: "show all ancestors of the current item" and "show all direct descendants of the current item". wp_nav_menu already provides all the HTML classes needed to implement the rules – Tom J Nowell Sep 8 '19 at 23:31
  • Hi Tom @tom-j-novell, thanks. Please see "Click on "Breaks":" which is a child of "Bikeparts".How do i hide the menu item "Bike Add Ons" when "Breaks" is active? ("Bike add Ons" is one level higher than "Breaks".) Default if have the classes: - menu-item for each li - active for each active li - current-menu-ancestor if i am on depth_1 and deeper - each menu-item has also a depth class (depth_0, depth_1, depth_2...) Could you help with the 2 simple rules? Thanks a lot!! – flo Sep 9 '19 at 12:42
  • By only showing the direct descendents, that's a CSS problem though not a PHP/WP one, the > selector will be helpful there, e.g. something similar to .current-menu-ancestor > ul > li.menu-item ( untested ), would show the immediate children but not grandchildren, it can be done entirely with CSS and can be figured out just by knowing about CSS selectors and inspecting the HTML classes – Tom J Nowell Sep 9 '19 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.