Morphing Hamburger Floating Action Button

This is a Morphing Hamburger Floating Action Button (FAB). It uses a combination of CSS transitions and keyframe animations to reveal a hidden context menu. Its function is to consolidate multiple secondary actions (Settings, Copy, Share, Delete) into a single, space-saving focal point. The interaction is initiated by a vanilla JavaScript class toggle.

Specs

• Weight: ~3 KB (HTML + compiled CSS).
• Performance: Uses hardware-accelerated transform and opacity properties for 60fps rendering.
• A11y: Includes basic aria-label, but lacks proper aria-expanded toggle and keyboard focus trapping.

Anatomy

The component is structured around a central parent container that manages state via a single CSS class.

• HTML (The Skeleton): A wrapping .list-container holds the main .more-button (the FAB) and the .more-button-list (the hidden ul menu). The hamburger icon is built using three simple div lines (.menu-icon-line).
• SCSS (The Skin): SCSS variables manage the color palette. It uses a clean .active state modifier on the parent container to trigger the menu’s scale transform (transform: scale(1)) from a bottom right origin.
• JS (The Nervous System): Extremely lightweight. A single event listener toggles the .active class on the .list-container when the button is clicked.

Logic

The defining feature is the staggered entrance of the list items combined with the hamburger morphing, driven entirely by CSS when the .active class is applied.

// Staggered list entrance
.more-button-list-item {
  animation: fadeInItem .6s .2s forwards;
  
  &:nth-child(2) { animation-delay: .4s; }
  &:nth-child(3) { animation-delay: .6s; }
  &:nth-child(4) { animation-delay: .8s; }
}

// Hamburger morphing
.menu-icon-wrapper {
  transform: rotate(-45deg);
}
.menu-icon-line {
  &.first { transform: rotate(-90deg) translateX(1px); }
  &.last { transform: rotate(-90deg) translateX(-1px); }
}

Instead of JavaScript calculating delays, SCSS uses :nth-child to hardcode increasing animation-delay values. Simultaneously, the hamburger container rotates -45 degrees while its top and bottom lines rotate -90 degrees, forming a perfect “X” with mathematical precision.

Feel

Snappy and deeply satisfying. Clicking the button triggers a distinct “pulse” ring (animation: onePulse), providing immediate tactile feedback. The menu doesn’t just appear; it unfolds diagonally while the individual items slide in sequentially, creating a high-end, native-app feel within the browser.