-
2032 readers
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.
![[del.icio.us]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/linkedin.png)
![[Reddit]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/reddit.png)
![[StumbleUpon]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/twitter.png)
![[Yahoo!]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/yahoo.png)
![[Email]](http://www.ilovecolors.com.ar/wp-content/plugins/bookmarkify/email.png)
Posted on Wednesday, March 11th, 2009 in .
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!