Expanding Floating Menu with Checkbox Toggle Using Pure HTML and CSS

Creating interactive UI components without JavaScript may sound tricky — but with clever use of HTML and CSS, you can build amazing features. One great example is this floating circular toggle menu that expands options outward when clicked, all powered purely by a checkbox.

In this guide, you’ll learn how this button menu works and how to implement it on your own site.

What Is This Floating Toggle Menu?

This UI component mimics an expandable action button like those seen in mobile apps or dashboards. It consists of:

• A round main menu button

• A hidden checkbox input to control state

• Three option buttons (A, B, and C) that expand outwards when the main button is toggled

When the checkbox is unchecked, the menu appears as a single button with a “+” sign. On checking the checkbox (by clicking the menu), it transforms into a “–”, and the menu options slide out with animation.

How It Works (No JavaScript!)

1. Checkbox Controls the Interaction

At the heart of this component is an <input type="checkbox"> element. It’s visually hidden but still clickable. It acts as a toggle switch for the menu’s expanded/collapsed state.

Using CSS sibling selectors like :checked ~ .option-a, different styles are applied based on the checkbox state.

2. Main Button Design

The central .button-menu:

• Is circular, styled in yellow (#ffdd00)

• Sits above the other elements using z-index

• Uses pseudo-elements ::before and ::after to show + or – symbols depending on whether the menu is open

3. Menu Options Animation

Each menu option (A, B, and C):

• Is absolutely positioned

• Starts in the center (collapsed)

• When the checkbox is checked, each button slides out to a new position (using transform: translate)

• Uses transition-delay to stagger the animation for a smooth expanding effect

This creates a floating radial menu animation that feels dynamic and interactive.

Key Features

• Pure CSS – No JavaScript required

• Toggle interaction controlled entirely by a hidden checkbox

• Staggered animation adds polish and motion

• Touch-friendly and perfect for responsive layouts

•  Clean and modern UI with customizable colors and shadows

Practical Uses

You can use this CSS-only menu in:

• Mobile navigation menus

• Floating action buttons (FABs)

• Tool selectors (e.g., for drawing apps)

• Any web interface where you need a clean, expanding options menu

Tips for Customization

• Change the background color of .button-menu and .option to match your branding.

• Adjust the animation direction by modifying the translate values.

• Increase or decrease the number of options by copying .option buttons and adding new transform rules.

• Add icons or SVGs inside the buttons for visual clarity.

Conclusion

This expanding toggle menu is a great demonstration of what’s possible using advanced CSS selectors and transitions. It’s lightweight, interactive, and doesn’t require JavaScript or libraries to function.

If you’re looking to enhance your user interface with smart animations and clean design — this component is an excellent addition to your toolkit.

Keep experimenting with CSS, and you’ll be amazed at the creative possibilities right at your fingertips!