WordPress.org

Ready to get started?Download WordPress

Forums

Hierarchial Menu - Only Show Parent's Child Links on Page (2 posts)

  1. LValfre
    Member
    Posted 9 months ago #

    I'm migrating a static HTML site to WordPress for a client. Here's the site:
    http://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?

  2. greendemiurge
    Member
    Posted 9 months ago #

    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.

Reply

You must log in to post.

About this Topic