Top 6 CSS Accordion Menus

AWESOME ACCORDION MENU

Awesome accordion menu using only HTML & CSS.

See the Pen Awesome accordion menu using only HTML & CSS by Ahmad Emran (@ahmadbassamemran) on CodePen.

[su_button url=”https://codepen.io/ahmadbassamemran/pen/zXwZKo ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

ACCORDION MENU

Accordion menu with HTML, CSS and little JS.

See the Pen Accordion Menu by Ahmad Emran (@ahmadbassamemran) on CodePen.

[su_button url=”https://codepen.io/ahmadbassamemran/pen/BPbVPe ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

VERTICAL ACCORDION MENU

CSS only vertical accordion menu.

See the Pen CSS Only Vertical Accordion Menu by Eriksen (@eriksenlezama) on CodePen.

[su_button url=” https://codepen.io/eriksenlezama/pen/EQarpO” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

CSS ACCORDION MENU

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

See the Pen Accordion Menu + Tooltip by mori (@morimiko) on CodePen.

[su_button url=” https://codepen.io/morimiko/pen/prMyrO ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

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.

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.

[su_button url=”https://codepen.io/jcoulterdesign/pen/qdWxEm ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]

ACCORDION MENU

Only CSS3 accordion menu with vibrating effects.

See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.

[su_button url=”https://codepen.io/pedronauck/pen/jaluz ” target=”self” style=”default” background=”#2D89EF” color=”#FFFFFF” size=”3″ wide=”no” center=”no” radius=”auto” icon=”” icon_color=”#FFFFFF” text_shadow=”none” desc=”” download=”” onclick=”” rel=”” title=”” id=”” class=””]Demo and Download[/su_button]