Forums

WordPress › Support » How-To and Troubleshooting

[resolved] show children pages on parent hover AND ON parent or child page (3 posts)

  1. stacybird
    Member
    Posted 5 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)

  2. stacybird
    Member
    Posted 5 months ago #

    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; }

  3. alchymyth
    The Sweeper
    Posted 5 months ago #

    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.

Reply

You must log in to post.

About this Topic

Tags