10 Ways to Install Accordion Menus in Your WordPress Theme
82Today you will learn 10 ways to install accordion menus in your Worpress theme!
This will help to organize your blog, make your site look more professional, and possibly save you some precious real estate in your layout. Real estate on a blog is as important as it is in the real world (especially in congested areas), you need to make the most out of your space as you can.
Accordion menus get their name from the instrument of the same name. Much like the bellows going in and out as someone plays music on an accordion, an accordion menu expands and contracts from user interaction, one section at a time.
This way top level names are listed at all times, but sub-categories and child items are only exposed as each section is expanded. Your visitors only see what they need to at any given time.
Accordion menus are used in blog navigation, and of course everyone’s blog is different, so your navigation might be in the header, sidebar(s), footer, or any combination thereof. I will show you many different examples because you could use them for pages, posts, categories, images, and more.
You will also see different ways to implement them, from plugins, to theme hacks, or by using special libraries. Hopefully you’ll have a ‘lightbulb’ moment and one will catch your eye!
1. Super Slider WordPress Plugin
SuperSlider is a WordPress plugin “suite” that does many things, including slideshows, image reflections, and image zooming capability. It’s accordion capabilities are what we’re interested in, so we’ll look at that section of the plugin suite (which runs on Mootools).
SuperSlider Accordion Navigation Menu: SuperSlider also allows you to create an accordion menu for navigation in your sidebar, like the one on their own web site. You have the ability to organize both your categories and your posts in a single navigation element with this plugin – which I believe is much more intuitive than the WordPress default of a list of categories and a list of recent posts. You can even add counts and RSS links to the menu. The are very customizable through the admin interface, theme based, and the animations are CSS.
Here’s the very detailed example from the superslider web site:
Visit the SuperSlider home page
2. BySlideMenu Accordion Menu
Accordion menus don’t have to be vertical, they can be horizontal as well. This is a great image based slider (based on Mootools) that can easily be integrated into the header of your wordpress theme by merely pasting a few lines of code and uploading a few files.
You will have to create your own cool images for the slider, and these navigation elements will be hardcoded and not dynamic…meaning as you add or remove major sections of your site over time you’ll have to manually modify your slider and links.
It does require more work than a plugin to configure, but I use this on one of my sites and everyone just loves it!
Here’s an image example of the BySlideMenu in action:
Visit the BySlideMenu home page
3. Accordion Image Menu Plugin
This plugin takes the last example and puts it on it’s side – literally! It’s a wordpress plugin that allows you to create an vertical image based menu. Here’s an example:
The picture doesn’t do it justice, you’ll have to check out the demo on the plugin homepage. Basically your elements have an image for background, and on mouseover each one expands to reveal the fuller picture for an awesome effect.
It’s got some great features for different applications too, like the ability to combine pages and categories in any order, recent post listing, and whether or not to include the textual title.
Visit the Accordion Image Menu home page
4. Post History Manager Plugin
Post History Manager is an oddly named plugin, but it does work great. It’s named post history manager because it’s a sidebar widget that manages 4 different kinds of “post history”; posts, comments, categories, and archives.
It’s simple, but it does work great. At first just the 4 headings are shown, but just click on any one for more and it will automatically expand “accordion” style vertically. Click on another, and the first one will contract and the next selection expand as in this example image:
Visit the Post History Manager home page
5. Sliding Notes Plugins
Another interesting accordion use is the “sliding notes” plugin. Basically it allows you to add a hidden element to your post, a footnote, translation, code, an aside, bio info, etc. -and then it slides out to be revealed (or slides back if you click it again).
By using shortcodes, you can add these sliding notes anywhere in the post content at all, I believe even multiple instances. It’s also very, very easy to customize the style of these with CSS.
Here’s an example of sliding notes in use to hide a simple translation after a post:
Visit the Sliding Notes home page
6. Accordion View Widget
Maybe you’ve seen all these examples and none so far tickled your fancy. That’s ok, because there’s code of course to do just about anything you want. Yahoo has long since had an entire library of effects that anyone can use in their web site code for free, and the Accordion View Widget is no exception.
This widget is the end-all-be-all of configuration options because it can be any size, and contain any content, and styled nearly any way. It won’t, of course, hook into any WordPress functions unless you do a little hacking and set it up that way – but the possibilities are endless.
Here’s an example image:
Visit the Accordion View Widget home page
7. Flexible Sliding Menus
Flexible Sliding Menus allows you to place your links, posts, and categories, in an accordion style menu – but this one has a twist because instead of being built on libraries like MooTools or jQuery, it’s built on Flash!
Add a simple call in your sidebar, upload the plugin and swf file, enable it, configure your options and you’re done!
Here’s an example image:
Visit the Flexible Sliding Menus home page
8. Tabbed Widgets
Tabbed widgets is another ill-named plugin because it doesn’t completely describe what it does. It’s a widget that’s capable of producing either a tabbed or accordion style widget.
You could actually configure multiple instances of the widget, and have several accordion style, one accordion, one tabbed, etc.
Here’s an example of the accordion style widget:
I wanted to also show you how easy the configuration on this one was as well:
Visit the Tabbed Widgets home page
9. Advanced Spoiler
Much like the Sliding Notes earlier, Advanced Spoiler allows you to hide some content and and click to “expand” it into view.
The name of the plugin indicates that you can use it to hide a spoiler for a story, but it could also be used to hide just about anything, such as footnotes, bio, additional info, etc. You can add content, images, or both. This example shows the ‘spoiler’ already expanded.
Visit the Advanced Spoiler home page
10. Slidoox Horizontal Accordion Slider
Slidoox is a very interesting slider based on Mootools that has some very cool effects. You can change the size, color, and background with the stylesheet.
It’s very difficult to describe how this one works, basically in setup you define a rectangle box, such as the size of your content area or header. At the top of the box are the names of content that you define. Unlike other menus when you click on an item at the top of the box, the items “slide” in from left or right – and that content can be text, images, or a combination.
This could definitely be used for featured content, and more! I won’t even attempt to give you an image for this one – I strongly suggest you view the live demo: click to view the Slidoox accordion slider demo
Visit the Slidoox plugin home page
Conclusion
I hope you learned more ways to add accordion menus today than you can shake a stick at. The ways to customize your theme are just about limitless, but accordion menus are a great place to start!
Let us know if you’ve used on accordion menus on your blog, and what script you used to get them!
Enjoy this post? You should follow me on Twitter!
This post is awesome purely for the graphics. :) Everything else is gravy. Tasty gravy.
.-= Andrea_R´s last blog ..Building a better blog host: Week 1 =-.
Great Post! Haven’t worked with accordion menu’s at all….
[…] Read it here! […]
Gravy is good isn’t it? Mmmmmm gravy……
.-= jtpratt´s last blog ..Brand New Theme Launch Checklist =-.
[…] In: WordPress plugins 15 Jun 2009 Go to Source […]
The sliding picture menus are fantastic.
Now to workout if I can use it in my theme?
.-= Ben´s last blog ..Internet Explorer 8, “the following file is missing or corrupt: system32\hal.dll” =-.
I’ve never really liked accordion menus. But now I know why – they’re rarely done right. If only some of the authors of these pages followed your advice, they’d save me some sanity I’ve lost trying to navigate their incomprehensible websites.
Great tutorial, I’m keeping it bookmarked in case any of my friends wishes to start blogging.
.-= Gry Dla Dzieci´s last blog ..Odkrywanka =-.
@Ben – Good luck, I’m sure you’ll figure it out!j
@GryDia Dzieci – I wish more people would consolidate a bit, cluttered blog are hard to navigate!
.-= jtpratt´s last blog ..Guest Blogging Builds Better Backlinks =-.
Hey, thanks for the nice review of sliding notes. I really appreciate it. :-)
.-= Hackadelic´s last blog ..Sliding Notes 1.5.0 “Accordion Virtuoso” =-.
[…] 10 Ways to Install Accordion Menus in Your WordPress Theme Today you will learn 10 ways to install accordion menus in your Worpress theme! – By Pro Blog Design […]
Accordion menus are really popular. Nothing strange because they look really excellent, they are great space savers and very functional. Thanks for sharing this great reviews.
[…] no, 10 son los menús estilo “acordeón” que desde Pro Blog Design nos proprocionan, explicando también como instalarlos en […]
great post! woot! ty! accordion menus ftw
.-= Animeeater´s last blog ..Basquash Episode 11 =-.
wonderful posts! thanks for the nice review of sliding notes!
I have already translated it into chinese in my blog! Do you mind?
.-= laomao´s last blog ..wordpress主题推荐–Bookish =-.
Thank you, thank you for this timely post. I have been researching on how to integrate these fascinating sliding menus into our church website. I am grateful to you. God bless!
.-= anapatrice´s last blog ..Jesus’ Journey =-.
[…] 10 Ways to Install Accordion Menus in Your WordPress Theme | Pro Blog Design – 10 Wege ein Accordeon Meün in Deinem WordPress Blog zu installieren. So einen sexy Slider wünschen sich doch viele Blogger, oder? Hier wird anhand von 10 Tutorials gezeigt wie es geht. No TweetBacks yet. (Be the first to Tweet this post)Related Posts:Rocking Links vom 5. Juni 2009 bis 6. Juni 2009Rocking Links vom 8. Juni 2009 bis 11. Juni 2009Rocking Links vom Juni 3rdRocking Links for 2009-04-20Automatische Blogposts durch Delicious Plugin Share and Enjoy: […]
[…] problogdesign 的文章 ”10 Ways to Install Accordion Menus in Your WordPress Theme“告诉我们10种方法在自己的wordpress主题中应用手风琴效果的菜单和其他.中文版地址: “10+给博客添加滑动菜单的方法“.作者为:爱晨网志. […]
[…] 10 Ways to Install Accordion Menus in Your WordPress Theme Today you will learn 10 ways to install accordion menus in your Worpress theme! – By Pro Blog Design […]
Accordion menus are a wonderful way to keep one’s site layout organized, uncluttered, and very professional. I love the clean and simple look this brings to one’s site. Love this post on accordion menus, very comprehensive and useful, lots of new things to learn. Thanks!
[…] Navigation organisiert. Da könnte eine klappbare Menüstruktur à la “10 Ways to Install Accordion Menus in Your WordPress Theme” hilfreich sein. Alternative: Nur noch Tags und eine Tag-Cloud […]
10 Ways to Install Accordion Menus in Your WordPress Theme…
Today you will learn 10 ways to install accordion menus in your WordPress theme….
originally i thought it was called vertical tabbed menu, thanks Google i found this page, very informative
.-= Mac Babe´s last blog ..Batch Resize Pictures in iPhoto using Mail =-.
[…] 10 Ways to Install Accordion Menus in Your WordPress Theme Today you will learn 10 ways to install accordion menus in your Worpress theme! – By Pro Blog Design […]
The Tabbed Widgets plugin was nice, when it worked. Since the WP 2.8.x upgrade, it hasn’t been updated to work correctly.
[…] 3. WP Plugins Funny thing, I’ve actually updated History Manager for 2.8.x, I just haven’t uploaded it yet. The reason is that I’ve been waiting to get a dedicated plugin site going, rather than just having it as a subset of AAG. But I think this is really cool: History Manager actually got a link here talking about how to implement an accordion. […]
[…] sidebar features an accordion menu. We talked recently about ways to add accordion menus to WordPress, and Real Estate is a great example of accordions being done […]
I’d like to tell you that the History Mangaer plugin have been updated by AndrewAnimation. It’s at 2.5 now. And it got some new neat features.
Sorry for being a bit spammy. But Andrew is a good friend of mine, and I think that his plugin needs more attention.
Some accordion examples are FAST. I want one for wordpress Page lists in sidebar or top bar, not a non WP expander that must be adapted. Any tips?
The “tabbed widgets” demo at http://konstruktors.com/blog/ does not exist.
I uploaded “tabbed widgets” and it won’t let me select any of the standard widgets of Default theme, just some others I am reviewing. I need Pages, Links, that sort.
Amazing art! THX John
nice tutorial…easy to understand..thank you
gxyssgt
[…] Source… […]
How can I configure the byslidemenu? Is it really so difficult to configure? Do I need to have mootools framework? Thaks a lot!
[…] know there are 10 ways to install accordion menus, but somehow none of them was working for me as I don’t want to install any plugins or make […]
outstanding resource compilation. thanks for taking the time to list it out and review it. truly appreciate it. peace!
[…] 10 Ways to Install Accordion Menus in Your WordPress Theme | Pro Blog Design (tags: wordpress menu plugins jquery navigation javascript) […]
Wow, awesome list! Thanks so much!
Great! Amazing! I was looking for similar information for a long time. Thanks!
[…] http://www.problogdesign.com/design/10-ways-to-install-accordion-menus-in-your-wordpress-theme/ […]
Awesome list, thanks for sharing! I’m new to the Accordion Menu, but definitely will be using it, once I figure it out. I’m wondering, is it SEO friendly? e.g. if u created a whole page that’s put into Accordion Menu style, is the content hidden inside the Accordion visible to the Search Engines?
I’m guessing it should be, but would like to know for sure. If any1 knows, pls leave a comment, as i’ve subscribed to got notified when someone comments here.
This is an excellent and very helpful post. I have been looking for ages for an accordion to display some cheap graphic design packages for our clients but didn’t want to split them over lots of confusing pages. The horizontal ones definitely do the job so I’ll be trying them out. Thanks
like the bellows going in and out as someone plays music
Is there a wordpress navigation accordion sidebar plugin? I am very suprised out of all the ones mentioned I have not seen one specifically just for navigation to pages alone. Most are for comments or categories. One that uses the new menus feature in 3.0+ so I can make a navigation menu would be exactly what I am looking for. I can not find one and am surprised nobody has created one. I just want a side navigation that can be edited by users and has an options panel so it is easy for users to edit. I wish I new more about this wordpress so I could make one. I am limited with time but so if anyone can help with some insite I would appreciate it.
Hi John!
Do You know have any tutorial how to inplement YUI AccordionView in wordpress step by step
thanks a lot
Dario
hi, Im traveling from NY to DC and reading your blog on my iphone and its showing up kind of crazy so Im leaving a trackback so I can come back and continue to view it when i get off the plane.
Is this good only for joomla or can it be applied to wordpress? thanks!
sorry about my first comment..what i was thinking is what i read before that wordpress does not support java so accordion style cannot be implemented. I know accordion style can be implemented in joomla just like moofaq plugins. Thanks for the post! Helped me a lot!
“It’s very difficult to describe how this one works, basically in setup you define a rectangle box, such as the size of your content area or header. At the top of the box are the names of content that you define” Good thing you state this one.
Nice site man! Keep up the good work haha.
Cool, I have not seen one specifically just for navigation to pages alone. Most are for comments or categories. One that uses the new menus feature in 3.0+ so I can make a navigation menu would be exactly what I am looking for. I can not find one and am surprised nobody has created one.
Wonderful wording you used for the info here. It’s actually quite interesting. Hmm.. Strange how nobody else doesn’t really agree with what you’re saying. Nevertheless, useful info!
Thanks for sharing these plug-ins. They are a big help. I tenant Screening wish more people would consolidate a bit, cluttered blog are hard to navigate!
I’ve never really liked accordion menus. But now I know why – they’re rarely done right. If only some of the tenant Screening authors of these pages followed your advice, they’d save me some sanity I’ve lost trying to navigate their incomprehensible websites.
The wording you used for the info here. It’s actually quite tenant Screening interesting. Hmm.. Strange how nobody else doesn’t really agree with what you’re saying.
[…] Ways to Install Accordion Menus in Your WordPress Theme | Pro Blog Design 10 Ways to Install Accordion Menus in Your WordPress Theme | Pro Blog Design. February 11th, 2011 | Cat= Plugins, […]
Nice site man! Keep up the good work haha.
This info is just what I needed.
I like what you say. I have to agree this is right on target. Keep up with the good work!
Teen Tuggers big 4 accounting firms
It does everything. Very useful to organize stuffs in the word press.
Thanks very much, I used the accordion plugin in the sidebar of my wordpress site. Thanks again!
This was incredibly useful and informative. Go here for more of your printing needs!
I couldn’t get the SuperSlid one to work. It just showed all the tabs open and didn’t collapse :(
I have really struggled to find a good menu that is as versatile as I need. I’ll try some others on the list
great collection…thank you for sharing!!!
a nice informative tutorial on accordian menus…i wil use for my website too..
Wonderful wording you used for the info here. It’s actually quite interesting. Im traveling from NY to DC and reading your blog on my iphone and its showing up kind of crazy so Im leaving a trackback so I Injection Molding can come back and continue to view it when i get off the plane.
dbftbuo
Nice information about J query Accordion
There is one more new plugin for accordion menu: http://wordpress.org/extend/plugins/wp-jquery-accordion-menu/
Very Helpful.
Thanks for Sharing.
Keep it up :)
You’ve made it right, keep it up!
I’ve been browsing on-line more than three hours these days, but I by no means found any fascinating article like yours. It’s beautiful worth sufficient for me. In my opinion, if all site owners and bloggers made just right content material as you probably did, the web will likely be a lot more useful than ever before.
Thanks so much for providing individuals with remarkably breathtaking chance to read in detail from this website. It can be very beneficial plus stuffed with a lot of fun for me personally and my office friends to visit your web site no less than three times in one week to read through the newest issues you have. And of course, I am certainly amazed considering the fantastic points you serve. Certain two points in this posting are undoubtedly the most efficient we have had.
Very good layout and wonderful content, what else we require : D.
Thanks for the info, I must bookmark your website for my reference
I’ve never really liked accordion menus. But now I know why – they’re rarely done right. If only some of the authors of these pages followed your advice, they’d save me some sanity I’ve lost trying to navigate their incomprehensible websites.
In my opinion, if all site owners and bloggers made just right content material as you probably did, the web will likely be a lot more useful than ever before.
I couldn’t get it to work at all :( Doesn’t seem to be much support happening here so… abandoned
Thanks for taking the time to do this
With the option of used cars on sale, a car can now be easily purchased. There are numerous advantages and ways to search for a Japanese used cars and Japanese used vehicles on sale.
KKLA Sports Apparel Co., Inc was established in 2000 in ZeJiang, China. Now it has 12 bracnh companies around China. We are a worldwide wholesaler of Sports Apparel (Soccer Jersey,Basketball Jersey,Football Jersey,baseball Jersey,Icehockey Jersey). Our company consists of design, develop, produce, sale and service. Now we have more than 6 professional factories for our own products. Professional QC for professional products and service.You can mix NFL MLB NHL NBA Jerseysdifferent styles and sizes. And there is no mini order for you, Lowest price and Best service. Let’s be friends and business partner. Don’t hesitate to contact with us if you need anytime. We can supply those all NFL MLB NHL NBA Soccer Teams,such as NFL Teams: Arizona Cardinals Jersey ,Carolina Panthers Jersey , Green Bay Packers Jersey,Houston Texans Jersey ,Miami Dolphins Jersey , New York Giants Jersey , San Diego Chargers Jersey, St. Louis Rams Jersey,Tampa Bay Buccaneers Jersey ,NHL Teams : Buffalo Sabres Jersey , Carolina Hurricanes Jersey ,Columbus Blue Jackets Jersey ,Edmonton Oilers Jersey , Montreal Canadiens Jersey ,New York Islanders Jersey ,Philadelphia Flyers Jersey , San Jose Sharks Jersey ,Tampa Bay Lightning Jersey , NBA Teams: Charlotte Bobcats Jersey , Denver Nuggets Jersey , Los Angeles Lakers Jersey , New Orleans Hornets Jersey, Oklahoma City Thunder Jersey , Phoenix Suns Jersey , Seattle Sonics Jersey , Kobe Bryant Jerseys Jersey ,MLB Teams: Boston RedSox Jersey, Cleveland Indians Jersey , Kansas Royals Jersey, Milwaukee Brewers Jersey ,New York Mets Jersey ,Pittsburgh Pirates Jersey , St.Louis Cardinals Jersey , Washington Nationals Jersey,Soccer Teams: Barcelona Jersey , Inter Milan Jersey , Marseilles Jersey , 2011-2012 National Jersey , France Jersey , Portugal Jersey and so on