show children pages on parent hover AND ON parent or child page
-
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
FOURi want the following to happen….
on page ONE
ONE
TWO
THREE
FOURon page ONE, hover over TWO
ONE
TWO –> do, re, me, fa
THREE
FOURon page TWO
ONE
TWO –> do, re, me, fa
THREE
FOURon page TWO, hover over THREE
ONE
TWO –> do, re, me, fa
THREE –> so, la, ti
FOURetc 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)
-
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…
- The topic ‘show children pages on parent hover AND ON parent or child page’ is closed to new replies.