CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Animated Menu Button

An accessible menu button with a morphing icon.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Animated Menu Button component is used to display a button with a menu icon that animates on click.

It includes two animations:

  1. from 'menu' to 'close'
  2. from 'menu' to 'arrow' (up/down/right/left)

The menu icon is created in CSS using the .anim-menu-btn__icon element and its ::before and ::after pseudo-elements.

The menu icon can be customized by editing the CSS custom properties listed at the beginning of the CSS file:

:root {
  --anim-menu-btn-size: 2.4em;
  --anim-menu-btn-icon-size: 30px;
  --anim-menu-btn-icon-stroke: 2px;
}

To make sure this component is accessible, don't forget to include a link to the section it toggles. A good example of how to do that is our main-header component (check the .main-header__nav-trigger element).

If you need to track the status change of the menu button (for example, you need to trigger the opening/closing of a navigation element), you can use the custom event anim-menu-btn-clicked that is emetted each time the button is clicked. You can use the detail property of the emitted event to check whether the button has the anim-menu-btn--state-b class (event.detail is true) or not (event.detail is false).

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.