Hierarchial Menu – Only Show Parent's Child Links on Page

  • I’m migrating a static HTML site to WordPress for a client. Here’s the site:
    https://www.citylivingdesign.com

    If you click on a side menu page the menu will only open to show the child pages of that page. I’m trying to emulate this with PHP and a custom menu but am having trouble.

    Any advice?

Viewing 1 replies (of 1 total)

  • There are a couple of ways to go about this, but some (like using a walker method) can get really complicated.

    If I were to do this I would probably do it through CSS.

    So, your standard menu spools out an unordered list, and the second level tends to be wrapped in another UL with a sub-menu class.

    The active page’s li gets a couple of classes like “current_page_item” and “current-menu-ancestor.”

    What you could do is put a “display: none” on the .sub-menu class, and then override this with a “display: block” on .current-menu-ancestor .sub-menu.

    .sub-menu {display: none;}
.current-menu-ancestor .sub-menu {display: block;}

    Using the .current-menu-ancestor should keep that revealed at all lower levels, so that if someone clicks through to a sub-item the sibling menu should stay revealed.

    Let me know if that works for you. If needed we can work out a walker.

Viewing 1 replies (of 1 total)
  • The topic ‘Hierarchial Menu – Only Show Parent's Child Links on Page’ is closed to new replies.