1stWebDesigner

9 Open Source CSS Accordion Menu Methods and Designs

You can build some nice menus with jQuery and most of them use free plugins. These menus include dropdowns and responsive slideouts, but many devs forget about accordions.

The accordion menu is versatile enough to add real value to any interface with many related links.

Horizontal Accordion

I don’t see too many of these horizontal accordions but they’re really cool. Most of the time they feature images or some type of Q&A with guidance for users.

But this type of accordion can also work as an onboarding feature or a simple in-page information box.

This specific example developed by Wesley van Wyk showcases what you can do with pure CSS3 and a little imagination. It uses rotation animation effects to open and close the accordion based on which tab you click.

Probably not the most efficient solution if you want broad browser support, but still, an amazing effect that proves CSS is usually all you need.

Radio Accordions

Another pure CSS method of creating an accordion is through radio inputs. These buttons only let the user select one item at a time so they can be programmatically re-designed into an accordion setup.

This pen by Scott Earl shows that radio accordions can be both functional and beautiful. This specific design is snappy and super easy to use, even on mobile devices.

The radio inputs have been totally restyled and take up a good amount of space in the sliding menu. It’s one of the best options for designing a sleek accordion UI without getting into messy JavaScript.

Also check out Scott’s CodePen page if you want to see more great stuff he has built. There’s a lot of practical snippets on there you may find useful.

CSS3 Accordion Slider

Hover-to-animate effects can be controlled using the CSS :hover pseudo-class. This means you can control most user hover behaviors just with CSS.

In this pure CSS3 accordion you’ll find a bunch of really simple effects and custom animation features. This thing is gorgeous and one of the few easy-to-setup accordions out there.

I’d recommend this mostly as a custom slideshow feature on a homepage for startups or local companies. You can feature related photos and add some descriptive text into each accordion field.

Plus you could even link the bottom title area to a related page or blog post making this great as a featured section for magazine-style layouts.

CSS-Only Accordion

The one trait I like about traditional accordions is how one menu item always stays open. This means if you click another item the previous one auto-closes at the same time as the new one opens.

This CSS accordion shows you how to do this using CSS3 and radio input fields.

Each input is heavily customized to blend right into the accordion. It uses a real simple design, but you can also change the colors/fonts on your own with extra CSS.

The beauty of this snippet is the simplicity of the design. It doesn’t rely on fancy animations or anything complex beyond just showing content and creating a usable interface.

Multi-Open Accordion

If you want the exact opposite of the “one item at a time” accordion then you might like this design created by Frank Ali.

It also relies purely on CSS3 but it uses checkboxes instead of radios. These checkboxes can be selected all at once or with any combination so users can open many accordion areas simultaneously.

Not everyone wants this effect because it can take up a lot of space on the page. I think it would work really well for vertical navigation menus or sidebar menus that require multi-level links.

If you want a simple accordion that supports multiple panels then definitely check out this method.

Activated Accordion

Most users prefer the click-to-open accordion style because it’s been the default for years. Yet there are no rules for going against the tide, and that’s exactly what this hoverable accordion menu aims to do.

Free and built with CSS, this thing is a real treat to use. The hover effects animate with a small delay, so you don’t feel like you’re immediately jumping through content.

Also the design is pretty simple, and have full control over the colors with a bit of CSS tweaking.

Users should have no trouble working with this interface so if you like the hover design then definitely work with this template. It’s very much like the photo gallery example I mentioned earlier except this design is vertical rather than horizontal.

Simple Menu

Short and terse best describes this snippet of a simple accordion menu.

This is also aligned vertically and runs on hover events, so the user just mouses over the accordion header to open sub-links. The difference here is the animation style (or lack thereof).

When you hover a link it’ll automatically display all sub-links at once. This can be OK for some sites, but with others, it’ll be a real pain. The jumpy animation can also be annoying if your page isn’t very long since the browser’s scrollbar would jump in and out of view.

But if you want something snappy this is sure to do the trick.

You could also restyle the sub-navigation menus, so they aren’t as tall. This would make navigation a bit easier, and the jump would feel less harsh.

Accordion Sans-Animation

Continuing with the theme of no animation is this custom design, again running on pure CSS.

However this one relies on click events, so it works more like a traditional accordion. The design leaves a lot to be desired, so if you work with this code you’ll probably want to clean up the interface a tad.

But overall the behavior is phenomenal, and this pen is one of the simplest ones you can start with.

Dark Vertical Menu

For a truly unique design check out this dark menu. It reminds me of a Dribbble shot of some kind since it’s extremely detailed and uses a lot of natural gradients.

The actual CSS has a lot of base64 code, so this sets the page background and icons. Meanwhile, the gradients work through CSS3, and the entire hover effect uses CSS too.

One nice thing about this menu is the mix of static links and accordion-style links. You can copy this menu for your own accordion and still have a mix of non-accordion items inside.

Plus the animation is smooth, and even with the hover-to-show effect it’s got a real nice UX. An excellent choice for anyone looking for a dark accordion UI template.