Folding menu plugin for WordPress
A while ago I wrote a post about creating a folding menu for WordPress built in Pages widget using only jQuery without adding or modifying any markup or PHP. A reader, Kretschmar, reported some bugs and asked if it could work for more than one level.
After modifying the jQuery for it to work on multi level depth I created a simple plugin for WordPress. See the demo of ILC Folding, go and click on Page 2.
Here’s the jQuery code:
jQuery(document).ready(function(){
jQuery(".page_item ul").hide();
jQuery(".current_page_item ul:first").slideDown();
jQuery(".current_page_item").parents("ul, li")
.map(function () {
jQuery(this).slideDown();
});
});
So, after sliding down the first parent and getting all parents of current_page_item, we slide down each parent level by level until the list is empty.
I packed everything and created a WordPress plugin so you can download the folding plugin for WordPress and start collapsing those Pages.
“Folding menu plugin for WordPress” received 57 comments! Add yours.
Leave a comment
Stock Files for sale on GraphicRiver
This looks fabulous! I’ll have to check it out – thanks for your hard work!
[...] Folding Menu Plugin [...]
Tadd: I’m glad it saw the light. It could’ve been sleeping the eternal dream forever. Hopefully now it will be useful to someone.
Say it!
=D
see the light
it will be useful for me too probably
thnx
i’m just learning php and such things about wordpress jquery blabla i have no idea you know xD
i forgot it
very nice pageeee!!!!!
is really cool i love it ^_^
Thanks Andrea for your kinds words.
It would seem like a ‘demo’ / example would be essential to see what this does?!
Thx
May I ask where should one paster the wp_enqueue_script? Into a special file or into the head section? And the should js file be placed?
al, first of all, the download provided here is a WordPress plugin. Install it and activate it like any other WP plugin and that’s it.
The wp_enqueue_script sentence must be placed inside a hook linked to the `init´ action.
I’d love to see an example/demo too please.
btw great website, beautiful design.
I’ve set up a vanilla wordpress to demo this plugin. Go to ILC Labs and click on Page 2.
[...] :: Folding menu plugin for WordPress :: – WordPress Plugin folding menu [...]
Hi, this looks like what im after, however im not sure how to implement it. I have installed the plugin, and have the normal pages widget in use. What do i need to do to get this to work, at the moment all i get is the normal parent pages displayed by the pages widget. Im sure i have missed the point somehow, im compitant in XHTML and CSS, but only started using wp LAST WEEK!
thanks
Steve, install/activate the plugin and add some parent pages. Add then some children to parent pages. Visit your site and click on a page that has children pages. When the page is loaded the children will be revealed.
I’ve set up a vanilla wordpress to demo this plugin. Go to ILC Labs and click on Page 2.
great, sorted.
Only other thing, the child pages on my site are not indented, is this something i would need to sort in my css file?
Yes, you should apply your own styles. You can check the WordPress default theme to see which classes are used.
I’m working on a site and just used this plugin.
It works great, but the only thing i dislike, is that it keeps refolding after clicking on one of the ‘children’.
Is there a way to just keep it fold out, when it is already?
Thanks in advance!
Testing this plugin, and I like it a lot. But it seems to auto-expand different child pages at will – is there a way to force it to collapse all but the current tree?
Thanks!!!
Peter, Stuart: maybe I can add a switch for those who want it to operate that way.
That would be great. Apart from that, 10 out of 10!
Great plugin!!! It would be nice to have a feature to slide down the sublevels without entering the first-level page…
Great plugin, wish wp had this functionality by default! Great work!
Peter, I think that the beautiness of WP lies in the fact that it is quite small, so is not bloated with a lot of code. I’ve always loved the C programming language due to this. It’s small but you can build a skyscraper on top.
Very well said!
Thank u for the nice plugin.
I am testing the plugin and works fine with pages but when you a add a category the plugin does not remain open on the current li, is there a workaround ?
This plugin is intended to be used with the Pages widget. I could add later some code to catch the categories folding, but I’m currently quite busy with work so it will have to be after one week.
Worked perfect buddy. Thanks for developing this.
No prob. I’m glad it’s useful to you.
[...] aktuellen Seite anzuzeigen und den Rest einzuklappen. Bei der Suche nach einer Methode bin ich auf Folding menu for WordPress gestossen. Allerdings fand ich die Animation bei jedem Klick etwas [...]
a new parenting blog for parent discussions chats and natters http://parentinggossip.blogspot.com/ get it all out
Thank you so much for this. I’ve searched so long for something like that. Great …
Thanks for the great work you do. Appreciate your valuable time.
Thanks for sharing the plugin. Will try it out today!
[...] Posted in Resources jquery menu: http://www.ilovecolors.com.ar/folding-menu-plugin-wordpress/ [...]
This works great! Simple way to solve it!
Amazingly simple.. If your not paying attention you might not even know that it’s working. And it exactly what I have been looking for.
Thanks!
Your are amazing and I love you.
This is EXACTLY what I have been looking for. Thank you so much for working this into a plugin. Your work is very much appreciated!
Thanks Angela, I really appreciate your kind words.
firstly thanks for your plugin it’s really
brilliant, I’m trying to modify it however to act like an expanding/collapsing menu and less like an accordian eg:http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html#
However my programming is basic at best, anyways thanks I appreciate your plugin.
Hey Phill, it’s looking good!
Hi,
great plugin!! i have a question: i have more menù, but folding works only on first, there is the possibility to applu folding on every menù??
Nico, I will update the plugin later, but for now just replace the javascript code of folding.js with the following:
jQuery(document).ready(function(){
jQuery(“.page_item ul, .page_item .children, .menu-item ul”).hide();
jQuery(“.current_page_item ul:first, .current_page_item .children:first, .current-menu-item ul:first”).show();
jQuery(“.current_page_item, .current-menu-item”).parents(“ul, li”)
.map(function () {
jQuery(this).show();
});
});
NOt working in IE???!
all menus appear “expanded”!
The demo-link is broken. Please let us see a demo..
ey mate,
hell knows how many times i tried but im such a noob in php and the works. i’m using sandbox and i couldn’t make it work. please help. thanks!
I can’t add anything to my sidebar without it making the menu disappear all of a sudden. Is there a solution to this new problem?
It’s not a problem. It’s the way WordPress works. If you have an static bar that supports widgets, whenever you add a widget the other static content will dissapear to make room to widgets. Just keep adding the widgets you need.
“Just keep adding the widgets” and …?
Your menu will reappear after a while?
Sorry I don’t quite understand.
Maybe I should add widgets to a second sidebar instead.
Anne, if your site is greenlandwhitefront.org, it is currently not using Widgets. The menu is generated in what we call an static sidebar. If the sidebar is (and I assume it is) widgetized, you should first add the Page widget and then the Category widget. Here’s a doc from wordpress.org regarding the use of widgets.
hey! …quite a while ago you talked about the possibility to make a “switch”….for those who don’t want to slideup the children when clicking on them… was this already solved? thanks.nico
Elliot April 2nd, 2009
Peter, Stuart: maybe I can add a switch for those who want it to operate that way.
It works fine in Firefox & Chrome, but it doesn’t work properly in IE:
Here is the code i’m using:
jQuery(document).ready(function(){
jQuery(“.page_item ul”).hide();
jQuery(“.current_page_item ul:first”).slideDown();
jQuery(“.current_page_item”).parents(“ul, li”)
.map(function () {
jQuery(this).slideDown();
});
});
For some reason IE appears to fail on this line:
jQuery(“.current_page_item”).parents(“ul, li”)
Is anyone able to advise how I can fix this so that IE recognises this code?
Please help!! It’s a great plugin but I really need it to work in IE as well.
wonderful, thank you!
Hello,
I recently updated my theme and my WP installation, so I am not sure which caused this problem, but ILC Folding was working perfectly. Mainly, my side navigation used to display (top and sub-levels) and highlight appropriately (current page item), then it started doing this weird thing that when you clicked on a parent level, or a subnavigation menu item that was in a submenu already displayed, it reloaded the entire side menu again. To fix this I used the following code:
#left ul li ul{ display: none; }
#left li.current_page_parent ul { display: block !important;}
This seemed to do the trick, and it does for the first and second levels of my side navigation, but when you drill down to the third level and below, all of the third level menus get displayed, even for items that are not currently active.
This code fixes that:
#left li.current_page_parent ul.children li.current_page_item { display: block !important;}
But then you get the reloading of the entire menu again. If you look here you will see what I mean: http://arboretum.harvard.edu/library/image-collection/the-arnold-arboretum-captured-in-time-1982-1987-photographs-by-corliss-knapp-engle/
I hope this makes sense, I would really appreciate any help, I am stuck.
Thanks!
Hi there, like Anne above I too have a problem with this plugin in IE7. When I click an ancestor page link, the menu folds out and the children pages will display briefly, but then disappear. The space they take up will be visible (there’s a gap between the current ancestor menu link and the next one), but there’s no clickable zone where the sub pages should’ve been displayed, just the empty space (tested this because I suspected the link colour was the culprit). Any help would be greatly appreciated!