⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳

Projects

Progress value is 30%

Animated Menu Button

An accessible menu button with a morphing icon.

View Demo

Dependencies

All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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).

Categories

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.