accordion-menu

Today 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-handsAccordion 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:

superslider-menu-example

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:

byslidemenu-example

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:

accordion-image-menu-examples

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:

post-history-example

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:

sliding-notes-example

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:

yui-accordion-menus-example

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:

flex-sliding-menus

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:

tabbed-widgets-example

I wanted to also show you how easy the configuration on this one was as well:

tabbed-widget-setup-example

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.

advanced-spoiler-example

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!