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.
This post may contain affiliate links. See our disclosure about affiliate links here.