9 CSS Accordion Menus

About the code

Awesome Accordion Menu

Awesome accordion menu using only HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About the code

Accordion Menu

Accordion menu with HTML, CSS and little JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

About the code

Vertical Accordion Menu

CSS only vertical accordion menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Accordion Menu

Pure CSS accordion menu using HTML input type="radio".

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Accordion

Accordion menu with only HTML and CSS. Click on an item to open. Click on its header or the list header to close. Add the class arrows to nav.accordion to add dropdown arrows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Accordion Menu in Pure CSS3

In this tutorial we will learn how to create an accordion menu in pure CSS3. As we will create it with CSS this will only work on browsers and devices that support the :target pseudo-class selector.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Multi-Level Accordion Menu

A simple CSS accordion menu with support for sub level items.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Swanky Pure CSS Accordion Menu

Pure CSS accordion menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Accordion Menu

Only CSS3 accordion menu with vibrating effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -