Implementation

The Scaling Hamburger Navigation creates an elegant, animated burger menu with a smooth scaling effect. When activated, the menu expands from a small circular button into a full navigation panel with animated link items. The widget features a dark overlay for better visibility, keyboard accessibility (ESC key support), and smooth transitions throughout.

HTML Structure

Use the following HTML structure:

• A main wrapper with ID fricking-burger-navigation
• Navigation container with data-navigation-status attribute to track state
• Dark background overlay with toggle functionality
• Hamburger menu container with:
  • Background element .hamburger-nav__bg that scales during animation
  • Content group .hamburger-nav__group containing menu items
  • Toggle button .hamburger-nav__toggle with animated bars
• Navigation list with menu items inside .hamburger-nav__ul
• Each menu item follows the pattern:
  • Container element .hamburger-nav__li
  • Link element .hamburger-nav__a with href
  • Text element .hamburger-nav__p containing link text

CSS Styling

The CSS handles all positioning, animations, and visual effects:

• Fixed positioning for the navigation container
• Z-index management ( z-index: 500 ) to ensure menu appears above page content
• Smooth transitions using cubic-bezier timing functions for natural movement
• Scale transformations for the expanding menu effect:
  • Initial state: transform: scale(0.15) rotate(0.001deg)
  • Active state: transform: scale(1) rotate(0.001deg)
• Visibility and opacity management for elegant fade in/out
• Hover effects for menu items using translateX transformation
• Active state styling for the current page with aria-current attribute

JavaScript Functionality

The JavaScript provides all interactive functionality:

• Event listeners for toggle button, background overlay, and ESC key
• State management using data attributes ( data-navigation-status )
• Toggle functionality:
  • Opens menu by changing status from "not-active" to "active"
  • Closes menu by resetting status to "not-active"
• Multiple close triggers (toggle button, background click, ESC key)
• Compatibility with Lenis smooth scrolling library (commented sections)
• Self-initializing function that checks document readiness

Customization Tips

You can easily customize various aspects of the navigation:

• Menu position: Adjust the top and right values in .hamburger-nav
• Animation timing: Modify the transition durations (currently 0.7s for most elements)
• Background color: Change background-color: #F3F3F3 for the menu
• Overlay opacity: Adjust opacity: 0.33 in the active dark background
• Menu size: Modify the scaling values and padding properties
• Text styling: Update font properties in .hamburger-nav__p
• Menu width: Change width: 100% in the active background to control expanded size
• Border radius: Adjust border-radius: 1.75em for more or less rounded corners

CMS Integration

To integrate with a CMS:

• Create a menu collection with fields for:
  • Menu item text
  • Link URL
  • Current page flag
• Use template logic to generate each .hamburger-nav__li item
• Apply aria-current="page" attribute conditionally based on active page
• Ensure unique IDs if multiple navigation menus appear on one page
• Consider creating options for:
  • Menu title text (currently "Menu")
  • Position (top/right values)
  • Color scheme
  • Animation speed