WP vertical nav, Subpages should only display on hover of Parent WordPress
- SOLVED
Hi,
I am working on a Word Press website that has a vertical nav in the sidebar. Currently there are a handful of pages listed in the menu, a number of the pages also have subpages, these pages list indented below their parent page (in what I believe is the default style).
sidebar.php includes <?php wp_list_pages('title_li='); ?>
The menu is becoming too long and I would like to change it so only the parent pages appear automatically. When someone hovers on a parent page I would like the subpages to appear beneath in their current indented style. The other parent pages that are listed on the menu should move down accordingly.
I thought that this was a common enough menu style that it would be easy to achieve but I haven't found any answers.
I have not been able to find solutions in altering <?php wp_list_pages(); ?>
Ideally I would like to find a solution editing the php and css in Word Press. I am open to using Javascript. I am open to using a Word Press Plugin although there might be a conflict because I currently using the Page Lists Plus Plugin. I do not want to use Flash.
I have found some possible solutions using javascript but they all seem to include some kind of look with skins/images, etc... The site is already designed with a very simple look (the links and text only) and I cannot depart from that.
Thank you in advance for any advice.
Emily
Answers (3)
AdamGold answers:
jQuery part should be:
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li a').hover( function() {
// Now Daniele code
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery('ul#menu li ul.children').not(this).slideUp(250);
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').slideUp(600);
});
});
Emily Jane comments:
Hi Daniele and Adam,
Thanks for the advice.
Daniele - I understand what you mean, the functionality that i wanted does not make a very usable menu. Your idea of eliminating the slideup sounds like a way of dealing with the problem. Unfortunately I was not able to experiment with that because I could not get your code to work. I was able to get Adam Gold's code to work:
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li a').hover( function() {
// Now Daniele code
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery('ul#menu li ul.children').not(this).slideUp(250);
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').slideUp(600);
});
});
Adam's version demonstrated the usability problems that Daniele suggested. I was unable to disable the sliding up in his code. I imagine it is more complicated than just deleting the one line (sorry, I have very little understanding of jQuery syntax)
I would like to know how to disable the "slideup" within Adam's code so I can see how it looks on the site. Also wondering how that would work from page to page. i.e. if I switch pages will it collapse again.
I am also imagining another solution to the non-usability of my initial idea. What if the hover area grew to include all the children links (once they appeared) and there was a significant delay before they slide back up (maybe 3 seconds). I wonder if that would be less confusing for the user.
My main criteria for the collapsible menu is that it looks and feels natural, simple, intuitive, etc.. I am not sure if this is best achieved by changing the code above to prevent the children from sliding up, or by the (possibly more complex) method I suggested in the previous paragraph. I would need to see the menu actually functioning at least one of these ways to know if it makes sense.
Thank you for your help!
Emily
AdamGold comments:
What do you mean by disable the slideUp? What exactly do you want to change in my solution?
Thanks
Adam
Emily Jane comments:
Hi Adam,
The solution you present is actually what I asked for in my original question but when I try it out I realize that it presents serious problems as a usable menu. The submenus expand upon hover as they should but they collapse too quickly and easily to be accessed.
I think there are a couple possible solutions to this. One solution would be that they remain expanded after the initial hover.
Another solution might be more in line with what I was originally thinking. So a hover of the parent link would cause the children submenu to expand and it would remain expanded long enough to use the submenu and collapse in a time/situation that is not so abrupt it would confuse a user. I think this could be achieved if submenu would remain expanded while it is being hovered (not just while the parent link is being hovered). If this were the solution some precaution might have to be taken so the menu would remain expanded while someone mouses through the area of the submenu links (so it wouldnt expand while the mouse was momentarily between 2 of the children links). Also, there should probably be a delay before the menu collapses again as to allow the user to explore other links in the menu without an abrupt repositioning of everything. This solution seems a bit more complicated than the one I mention in the previous paragraph. So if the one in the previous paragraph looks functions and looks fine I can go with that.
I hope I explained that sufficiently.
Thanks,
Emily
AdamGold comments:
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li').hover( function() {
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').slideUp(600);
});
});
AdamGold comments:
Try the code above. If it's not good enough and you want a closing delay, it should be something like that:
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li').hover( function() {
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').delay(5000).slideUp(600);
});
There will be a 5 seconds delay until the expanded list is closed.
Good luck :)
Adam
Emily Jane comments:
Hi Adam,
Neither of these solutions work. If I use the first one my menu remains collapsed and will not respond to hovers. (while the page is loading I see the expanded version for half a second):
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li').hover( function() {
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').slideUp(600);
});
});
When I use the second example of code the menu is already completely expanded when the page loads:
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li').hover( function() {
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').delay(5000).slideUp(600);
});
Do you think its possible that some other setting in my php is overriding the jQuery?
The first chunk of code you sent me a few days ago caused the menu to expanded upon hover, but the submenu collapsed to easily/quickly to be properly accessible. here is an example of that code jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li a').hover( function() {
// Now Daniele code
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery('ul#menu li ul.children').not(this).slideUp(250);
jQuery(this).siblings('ul').slideDown(600);
}
}, function() {
jQuery(this).siblings('ul').slideUp(600);
});
});
Any suggestions?
Thanks,
Emily
AdamGold comments:
I don' think that something in your PHP causes the menu not to expand, I forgot to close the jQuery script, that's why it didn't work. The following code should work.
jQuery(document).ready( function() {
jQuery('#menu li ul').slideUp(600);
jQuery('#menu li').hover( function() {
if (jQuery(this).find('ul').is(":hidden")) {
jQuery(this).find('ul').slideDown(600);
}
}, function() {
jQuery(this).find('ul').slideUp(600);
});
});
Peter Michael answers:
You may want to have a look at https://github.com/jzaefferer/jquery-treeview
I've used this to list taxonomies (see 'Locations' at http://www.concretewashoutlocator.com/), but also works well with wp_list_pages
HTH
Emily Jane comments:
Hi Peter,
The examples I see in this demo as well as at http://www.concretewashoutlocator.com have a symbol next to the parent that must be clicked to reveal the children. I want the children to appear upon the hover of the parent.
Perhaps the jquery-treeview could be altered in order to function this way. But I have a very limited knowledge of jquery so I wouldn't know how to do this. Plus I suspect there is a more direct way of achieving the desired results (but could be wrong).
I should also mention that I do not have a third generation of pages (grandchildren?) so only 2 levels are necessary. The children should appear when the parent is hovered over and disappear when the mouse leaves the area of the parent & children.
Thanks,
Emily
Daniele Raimondi answers:
If you can provide a link to the a page with this menu, it could be useful. I think its a simple matter of hiding and reveal subpages with some rows of jquery programming and without touching anithing in your php code (eventually some css properties)
Emily Jane comments:
The site is:
http://www.paperchase.net/
Daniele Raimondi comments:
Hide and unhide on mouseover could lead to some interactivity problems on a vertical menù: for example, if you hover on a menu item with a few submenu entries, it expands toward the bottom; when you leave the last submenu entry and enter the next menu item, the previous submenu suddendly collapses, moving up the menu item you are going to hover.
to make it clear, just try to add this to one of your JS loaded on every page of your site
jQuery('ul#menu li ul.children').hide();
$("ul#menu li>a").mouseover(function() {
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery('ul#menu li ul.children').not(this).slideUp(250);
jQuery(this).siblings('ul').slideDown(600);
}
});
it does exactly what you are asking for (if i have correctly understands your needs), but it's not very usable!
Daniele Raimondi comments:
Otherwise you can choose not to collapse menu items on mouse-out and leave them expanded. Just remove the 4th line from the code above (the one woth "slideUp").
Daniele Raimondi comments:
if you delete the following lines
jQuery('ul#menu li ul.children').not(this).slideUp(250);
and
jQuery(this).siblings('ul').slideUp(600);
all menu items simply don't collapse anymore.
Furthermore it seems from my tests that, with adam version, menu collapse as soon as you hover the supages of an exploded menu item.
I should avoid in any case the following
, function() {
jQuery(this).siblings('ul').slideUp(600);
});
collapsing menu items ONLY when you hover on another menu item.
Emily Jane comments:
Hi Daniele,
I am unable to see any difference in the functionality of the menu (i.e. nothing it is all completely expanded as it was originally) when I use your suggested code. I am am viewing in safari 5 and firefox 3.6 on a mac.
jQuery('ul#menu li ul.children').hide();
$("ul#menu li>a").mouseover(function() {
if (jQuery(this).siblings('ul').is(":hidden")) {
jQuery('ul#menu li ul.children').not(this).slideUp(250);
jQuery(this).siblings('ul').slideDown(600);
}
});
Therefore I am unable to experiment with the further edits that you are suggesting.
Not sure why you can see it and I can't. Maybe you are using a different browser. Or maybe there is some parameter defined in my php that is causing this not to work on my site.
Any suggestions?
Thanks,
Emily