show children pages on parent hover AND ON parent or child page

  • Resolved pixeloco

    (@stacybird)


    13 years, 3 months ago

    on one of my wordpress themes i need to create a menu system that shows children pages on parent hover AND when the parent or child page is active… i do one or the other all the time and am super frustrated i can’t figure out how to do both together! hopefully someone can point me in the right direction.

    for example lets say i have 4 main parent pages, 2 of which have children
    ONE
    TWO –> do, re, me, fa
    THREE –> so, la, ti
    FOUR

    i want the following to happen….

    on page ONE
    ONE
    TWO
    THREE
    FOUR

    on page ONE, hover over TWO
    ONE
    TWO –> do, re, me, fa
    THREE
    FOUR

    on page TWO
    ONE
    TWO –> do, re, me, fa
    THREE
    FOUR

    on page TWO, hover over THREE
    ONE
    TWO –> do, re, me, fa
    THREE –> so, la, ti
    FOUR

    etc etc
    does that make sense?

    i know using CSS i can hide the children nav items and make them appear on hover, but how do i get them to STAY VISIBLE when they or their parent page is active? (i’d like to keep things dynamic…. i know i could just hard code it in but that kind of defeats the awesomeness of wordpress)

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter pixeloco

    (@stacybird)

    wow okay, so simple… i totally overlooked the basics here! for anyone else that might have the same brain fart though, here’s the stripped down CSS solution:

    li ul.children { position:absolute; display:none; }

    li:hover ul.children { display:block; }

    li.current_page_item ul.children, li.current_page_parent ul.children { display:block; }

    example Twenty Ten, something like this light work:

    #access .current_page_item ul.sub-menu, #access .current_page_parent ul.sub-menu { display:block;}
#access .current_page_item ul.sub-menu ul.sub-menu, #access .current_page_parent ul.sub-menu ul.sub-menu { display:none;}
#access .current_page_item ul.sub-menu:hover ul.sub-menu, #access .current_page_parent ul.sub-menu:hover ul.sub-menu { display:block;}
#access .current_page_item ul.sub-menu ul.sub-menu ul.sub-menu, #access .current_page_parent ul.sub-menu ul.sub-menu ul.sub-menu { display:none;}
#access .current_page_item ul.sub-menu ul.sub-menu:hover ul.sub-menu, #access .current_page_parent ul.sub-menu ul.sub-menu:hover ul.sub-menu { display:block;}

    the last two styles might not be needed if you only have one level of dropdown.

    @stacybird Thanks for the help. Saved me from some complicated function…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘show children pages on parent hover AND ON parent or child page’ is closed to new replies.