Nice Navigation
Plugin/Widget that makes your page list expandable/collapsible
- Download plugin from WordPress.org
Donate to support further development.
Users of my page managament plugin CMS Tree Page View have asked for a version of the tree to put on the ”public” side of their web sites. This is that tree! 
So what does it look like? Something like this:
Nice Navigation Features
- Simple and nice collapsible/expandable menu with your pages
- Better overview over your pages
- Instantly navigate to sub-pages
- Uses jQuery for a nice animation effect (hence the name)
- Users with JavaScript disabled will se a regular menu
- No downsides for SEO/Google, all pages still browsable by search engines
- All arguments/options available for wp_list_pages is available for this plugin/widget.
- Styles can be overridden with your own custom CSS
- Looks cool!
[...] like this…… and you can find more info and a download link on it’s own page http://eskapism.se/code-playground/nice-navigation/ Skriv ett svar Klicka här för att avbryta svar. [...]
Ahahaa, Whoa! You are insanely awesome! I think I have some feedback for you later but for now, cool!!!
Thanks
Looking forward for the feedback!
Some thoughts and observations:
- Arrows seem to behave a little odd. Have 3 parents with couple of childs. First arrow is always down, even if I comment out the ”open up onstart” line. Next 2 arrows goes down and up again upon first 2 clicks but then they are stuck. Same behaviour after page reload. This is on latest Chrome for Win. On Firefox (latest) you can collapse the first parent but then the whole tree is stuck. All on WP3, Twenty Ten and no other plugins activated.
- Replacing ”click” with ”mousedown” makes the experience more responsive. I’m no jquery guy so I can’t forsee other complications.
- Would be very nice with an option to make parent just a placeholder and be clickable (whole text) to expand the tree.
Again, many thanks for your work!
Bo
Thanks for the feedback!
There is an updated version available on wordpress.org now. Please try it and see if it works better.
Great!
Tested in latest Chrome, Firefox and Opera for Win and works perfect!
Would it be possible for arrows to change on click rather than after tree action?
[...] a bit different. Perhaps add a plus-sign or an arrow in front of the page. When I was working with Nice Navigation for WordPress i notices that this was not possible by default in WordPress. It is however pretty easy to fix. [...]
[...] Nice Navigation for WordPress [...]
Hi Pär
I just want to say Thank YOU for this wonderful plugin.
It’s just SUPER GREAT !!!
It’s a must for CMS wordpress.
Can not say thank you enough for this.
Please keep it up !
Would be very nice with an option to make parent just a placeholder and be clickable (whole text) to expand the tree.
I agree. This is something that I’m planning to implement for the next version. So stay tuned…
How to override styles with own CSS?
There are no way to add your own CSS through the widget, but you can modify the styles by adding CSS to any other CSS-file that is loaded.
Something like this changes for example the padding of the links:
.nice_navigation li a {
padding: 20px !important;
display: block;
}
Please note the ”!important”-part that sometimes is necessary to override the ”built in” styles.
Great. Worked perfectly. Great plugin.
FYI…does not seem to work well with text-indent.
Very nice work. Thank you!
Your plugin is perfect, except it breaks my menu:
http://newbirthoffreedom.org/youth/
The blue menu should look like this:
http://newbirthoffreedom.org/districts
When I deactivate it, the blue menu comes back.
I’m sure there is a simple fix, probably in the css, but can you help?
Thanks!
I’m not sure I understand your problem here. Can you give me a screenshot of the site before and then after so I can understand what’s wrong?
I tried the two links above, but couldn’t figure out the difference.. :/
This is a great plugin!
Is there anyway to integrate a wp 3 custom menu into this plugin istead of just using all of the pages to populate the menu?
Thanks
That’s probably possible. I haven’t played around with the custom menues yet. But I’ll see what I can do…
I know very little .php but I think inserting
‘secondary’ ) ); ?>
or some variation of this command might do the trick but I bow to your technical expertise on the matter. Any assistance or direction you can provide me with would be greatly appreciated!!
This is the resouce I used for my above comment…
http://www.sitepoint.com/blogs/2010/07/06/how-to-use-the-new-custom-menu-feature-in-wordpress-3-0/
Hi
Fantstic plugin
Many thanks.
I have it installed here http://www.circusstardust.com/ and have one query: When a child page is clicked the expanded list of child pages collapses. Is there any way to keep it open untill a top level link is clicked?
Thanks
Steve
OOps… I see what I’ve done! Please ignore me and thanks again!
How do I exluded some pages from showing in the navigation menu?
exclude=1,2,3
would exclude page 1, 2 and 3
How can I use both exclude and depth in the arguments?
try for example
exclude=1,2,3&depth=2
but I’m not sure if depth is available for all functions..
Hello,
Nice work and thanks.
Is there a simple way to change the (sort) order of pages without any parents ?
I’ve managed to change the order of the page wich have a parent, but my Welcome page keeps poping up at the bottem of the list.
Regards,
Pancho
Sorry,
I should have used the help.
It is now solved.
[...] Pär Thernström [...]
This is probably a really dumb question but for the life of me I cant figure it out. I have several parent categories all with many children. When the parent is expanded the children titles all start underneath the bullet. The site I am working on is http://www.allachporcelain.com/wp Any advice would be greatly appreciated. This plugin is exactly what I was looking for Thanks!
If you want to remove the bullet you should check your styles.css and remove any references to: url(”../../images/icons/bulletrbl.png”)
I’d rather keep the bullet and move the text to the right so that it is not covered by the bullet. Is that possible?
Sure. Try adding this to your styles.css:
div.nice_navigation ul ul li {
padding-left: 17px !important;
}
I think it should do the trick.
Hey worked great, I made a donation. Thanks for the great plugin.
Hi, do you think you will add a shortcode implementation for the widget? I would love to be able to include the navigation list, with optional page excerpts, on parent pages.
See the last screenshot on this page for what I think would be pretty cool functionality:
http://wordpress.org/extend/plugins/extended-page-lists/screenshots/
Also, what green users like myself will find very helpful is some real-world examples of how to use the Arguments field, including correct syntax. I initially dismissed your plugin because I thought it always displays all pages and wanted the navigation to only show a section of the site. Luckily, on a second review pass, I digged deeper and realized this is simple to do by just adding the ”child_of=[Page_ID]” in the argument field.
Your plugin is best from what I’ve seen but some of its power may be missed without a little more documentation.
Thanks!
Thanks for the feedback Strategerizer!
The shortcode is a good idea. I’ll try to find the time to fix this.
I will also try to make more examples.
Thanks for the reply. One of the instances where I find shortcodes indispensable is pages that require full width page template. On these pages, without a widgetized sidebar, I still need to show the subpage nav. So I think that would be most useful.
I think second priority (very useful but not critical) is the ability to have the shortcode for parent pages. In a nested hierarchy the parent pages are there mainly as gateway portals to the children so having a shortcode that automates the typical intro/excerpt to the children will be a real time-saver.
Thanks for listening.
BTW – I have not figured out what the Function drop-down does. Tries ”List pages” and ”List pages as menu” and both look the same. Would you give me a clue?
Thanks for such a great plugin. I have customized the CSS so it fits perfectly my site but the best thing is how well it works functionally!
Hi,
Great plugin! Thanks for all your hard work and attention to detail.
I was wondering what I need to do so that the navigation expands on load (So all the child pages are shown). I’ve tried editing the .js file, but have not had any luck. Your help would be greatly appreciated.
Thanks in advance.
Answer to my own questions above…
For some reason my server wasn’t updating, so when I deleted the necessary line to expand menu on load.
So, here it is. To expand menu on load you need to delete the following line from the script.js file:
$nice_navigations.find(”ul ul”).hide();
Answer to my own question above…
For some reason my server wasn’t updating, so when I deleted the necessary line to expand menu on load.
So, here it is. To expand menu on load you need to delete the following line from the script.js file:
$nice_navigations.find(”ul ul”).hide();
I see someone suggested making parent just a placeholder and I think it’s a lovely idea.
slick work!
hi,
why is it mine not showing the tree (it went back to parent tree only) when browsing the lowest tree page?
tq.
Hi,
I did come across an issue. You can see it here, using IE:
http://komotion.com/test-nice-navigation-widget/
Expanding nested list overlays the widget with the one below it… I guess the expected behavior would be for the widget below to move down.
Looks fine in Firefox; issue is in IE.
Any suggestions? Can this be fixed within the Nice Navigation CSS or is the issue elsewhere?
Is there any way to make Nice Navigation work on a WordPress 3.0 Custom Menu?
I’d like to have my Custom Menu in my sidebar do the expand/contract magic that Nice Navigation does with pages.
Scott
Thanks for sharing a great plugin.
I have a lot of pages and it was taking 20 seconds to display a page when the Nice Navigation plugin was enabled.
I found that the following code runs much faster on my system, and each of the pages were displayed in about 2 seconds instead of 20 seconds.
I replaced the nice_navigation_page_css_class function with the following code…
================================
function nice_navigation_page_css_class($class, $page) {
// Get the pages children, if it has any
$pages = get_pages();
$page_children = get_page_children($page->ID, $pages);
// Checks if a page has children
if (!empty($page_children)) {
$class[] = ”page-has-children”;
}
return $class;
}
================================
The above code seems to work fine for me, but you will need to test it before adopting it as a replacement for the original function.
Kind regards
John
A really beatiful little navigation plugin. Did not know, but this is what I’ve been looking for.
Thank you!
Can’t spell apparently, but beautiful it is.
Yea and expand/collapse from parent would be awesome. dik
Will this work with a menu like the captioned? Thanks!!!
Hi!
Really nice plugin, sir. Extremely useful for the site I’m currently developing, thanks a lot for the effort.
I’ve sadly found an issue with my navigation in a quite deep and branched page tree:
If I start randomly poking around the expand/collapse arrows (not clicking any link), I will get to a point in which a click does not expand the subpages under the arrow, but rather collapses some parent above the clicked page.
This may happen right on the first click, or down to a ten click sequence… it seems quite random.
Also, this behaviour does not seem to relate to a particular clicking sequence, I have not been able to duplicate the error doing the same clicking twice, nor predict it or find any pattern to it.
I’m afraid that’s all the info I can provide right now, my site is not live yet. I’ve tested on FF, Safari and Chrome with the same results.
I’ll drop a note as soon as I find more info, or my site goes live.
Thanks a lot again for the plugin!
Hi.. tahnks very usefeul plugin!
I have a question:
there is a way to display the menu on rollover instead on click?
or a way to make all the parents title clickable?
Lot of thanks
dRes
Hi,
What is the best way to provide NiceNavigation a custom page label?
For SEO purposes I want page name to be long and descriptive. But for sidebar navigation I want the page name to be short.
I discovered that using AllInOne SEO plugin I can provide a custom page label that is picked up by Nice Navigation. Now I switched to WordPress SEO but it does not provide a way to give pages a custom label name. Looking more into it I discovered a separate plugin through which I can provide page labels. But I am wondering if there is a better way, using the built-in WP3 custom menus.
Any thoughts on this?
Related threads:
http://wordpress.org/support/topic/custom-label-like-all-in-one-seo?replies=8
http://wordpress.org/support/topic/plugin-nice-navigation-request-use-custom-page-label?replies=3
Thanks!
IS there a way to show only ancestors (parents, grandparents, etc.) and offsprings (children, grandchildren, etc.)?
Reason being the website section I am using this on is getting quite large and Google does not like too many links on the page. So I would like to not show cousins (e.g. children of a parent sibling). So the user would be limited to going up/down/lateral in one hop. This should cut a lot of links crawlable on the page. IF user want to go to the cousin, tehy would need to go to the uncle first.
Is this possible?
Thanks!
Can the display order be set to match the WordPress menu order. Nice Navigation appears to list only in alphabetical order.
Can i add a php code to a template that calls this pluging?
Thanks a lot for this excellent pluging!
Hi,
I don’t know if you are aware of this but it looks like the NiceNavigation plugin has an unfortunate effect on the load of the wp-admin login page.
My login page is taking 30-40 seconds to load and googling a fix for this I came accross the suggestion that it is likely plugin related. So I disabled all my plugins and have narrowed it down to NiceNavigation.
Without it the load time is 7-9 seconds, with it is 30-40 seconds. I have the plugin installed in the main subsite of my multisite WP installation, running the latest version of WP.
Any advice?
(I really like the plugin and would love to be able t0 keep it!)
If you’d known how long (it’s been years) I’ve been trying to accomplish this exact sidebar navigation! Thank you from the bottom of my heart! It works perfectly!
[...] menu tο thе sidebar (οr elsewhere) οn уουr WordPress site, thе Nice Navigation plugin іѕ аn attractive substitute fοr thе standard WordPress Pages [...]
[...] If you want to add a secondary nav menu to the sidebar (or elsewhere) on your WordPress site, the Nice Navigation plugin is an attractive substitute for the standard WordPress Pages [...]
[...] you want to add a secondary nav menu to the sidebar (or elsewhere) on your WordPress site, the Nice Navigation plugin is an attractive substitute for the standard WordPress Pages [...]
[...] you want to add a secondary nav menu to the sidebar (or elsewhere) on your WordPress site, the Nice Navigation plugin is an attractive substitute for the standard WordPress Pages [...]
A nice plugin but it doesn’t work with custom menus it seems. The dropdown choice is only of pages, categories etc….:-(
Am I right?
Hi,
This is a great plugin!
But I would really like to show pages that are children of the current page. Or even children siblings. This is possible using `child_of=’.$post->ID.’` as the argument – but this doesn’t work in the plugin. Is it possible for your plugin to do this? I’m not sure if I’m making a mistake or it is not possible.
This would be a really common feature I think if it is not already possible. Listing parent and all decedents would be even better: http://codex.wordpress.org/Template_Tags/wp_list_pages#List_parent_Page_and_all_descendant_Pages
Perhaps there could be tick boxes to select some of these ”advanced” options?
Thanks for the plugin!
Hi,
This plugin works great, but I cannot seem to tweak it.
Basically, I want ALL parent pages to be hidden EXCEPT for the current parent page and its child pages.
If on a child page, then you should see:
-the ONE parent page
-all its child pages
-with current child page highlighted in bold.
Can anyone help with this? I have tried many codes in the exclude field, but cannot get it to work.
Many thanks.
Hi,
This plugin works great, but I cannot seem to tweak it.
Basically, I want ALL parent pages to be hidden EXCEPT for the current parent page and its child pages.
If on a child page, then you should see:
-the ONE parent page
-all its child pages
-with current child page highlighted in bold.
Can anyone help with this? I have tried many codes in the exclude field, but cannot get it to work.
Many thanks.
Alex.
Hi there, I am looking for the same information as Alex and Taz above. I’d like it to show only the page I’m on and the children of that page. I beleive a plugin called WenderHost Subpages has exactly this functionality as its main trick, if you were able to add something like this your plugin would pretty much kill all competition.
As it stands, I cannot have my whole website tree displayed on every page as it has 9 top level pages and many child pages per top level page
Thanks, nice plugin