20 Clean CSS Accordion Menus (Free and Open Source)
Enjoy these 100% free and open source accordion menus. These are the best CSS accordion menu examples we could find on the web. Enjoy.
1. Swanky Pure CSS Drop Down Menu
A great tutorial by Valeriu Timbuc. Post on February 27, 2016. It will only work on devices and browsers that support the :target pseudo-class selector.
Links: Source Code / Demo
2. Swanky Pure CSS Drop Down Menu V2.0
Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: April 19, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, dropdown, menu, ui, ux
3. CSS Only Vertical Accordion Menu
Author: Eriksen (eriksenlezama)
Links: Source Code / Demo
Created on: January 30, 2018
Made with: HTML, CSS
4. Awesome Accordion Menu Using Only HTML & CSS
Author: Ahmad Emran (ahmadbassamemran)
Links: Source Code / Demo
Created on: April 11, 2019
Made with: HTML, CSS
Tags: accordion, css3, html5, menu, menu_accordion
5. CSS Only Vertical Accordion Menu
Author: Eriksen (eriksenlezama)
Links: Source Code / Demo
Created on: January 30, 2018
Made with: HTML, CSS
6. Accordion Menu
Accordion Menu
Author: Ahmad Emran (ahmadbassamemran)
Links: Source Code / Demo
Created on: August 13, 2018
Made with: HTML, SCSS, Babel
Tags: accordion, menu, javascript, scss, accordion_menu
7. Swanky Pure CSS Drop Down Menu V2.0
Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: April 19, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, dropdown, menu, ui, ux
8. Multi-Level Accordion Menu
A simple CSS accordion menu with support for sub level items.
Links: Article & Code, Demo
9. Pure HTML+CSS Accordion (Without Javascript)
Author: Dandi Wiratsangka (dandiws)
Links: Source Code / Demo
Created on: December 11, 2016
Made with: HTML, CSS
10. Accordion Menu
Accordion menu
Author: Velihan (VelihanKara)
Links: Source Code / Demo
Created on: August 26, 2020
Made with: HTML, Less, JS
Tags: accordion, menu
11. CSS + HTML Only Accordion Element
Read the copy in the accordion sections for some info about how this was made.
Author: Alex Bergin (abergin)
Links: Source Code / Demo
Created on: April 17, 2014
Made with: HTML, Sass
Tags: css, html, accordion
12. Accordion FAQ
CSS only! No complicated JavaScript, Fonts etc.
Author: Christian Prado (caprado)
Links: Source Code / Demo
Created on: August 21, 2020
Made with: HTML, CSS
Tags: faq, accordion, css, details
13. Accordion Menu Using Only HTML & CSS
Accordion Menu Using Only HTML & CSS
Author: Okba Design (Okba-Design)
Links: Source Code / Demo
Created on: July 26, 2020
Made with: HTML, CSS
Tags: accordion, menu, using, only, html
14. HTML + CSS Only Accordion
Author: Alina N. (blackellis)
Links: Source Code / Demo
Created on: May 28, 2020
Made with: HTML, CSS
Tags: accordion, html, css
15. CSS Sliding Multi-level Accordion
CSS sliding multi-level accordion example for tutorial on http://blog.alexdevero.com/
Author: Alex Devero (alexdevero)
Links: Source Code / Demo
Created on: October 30, 2015
Made with: HTML, SCSS
Tags: css, accordion, navigation, design, ux
16. Accordion
Author: ari (tari)
Links: Source Code / Demo
Created on: March 28, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: accordion
17. Collapse Menu
Author: Daniele Manzi (DanieleManzi)
Links: Source Code / Demo
Created on: December 20, 2019
Made with: HTML, CSS
Tags: menu, collapse, accordion, sidebar
18. Awesome Accordion Menu Using HTM & CSS
Reference from DarkCode
Author: Muhammad Fadzrin Madu (fadzrinmadu)
Links: Source Code / Demo
Created on: June 26, 2020
Made with: HTML, CSS
Tags: html, css, accordion, menu
More Awesome Lists:
Share: