Can Webflow interactions be used to create a vertical side menu that slides in on mouse hover, reveals submenus when icons are clicked, and hides automatically when the cursor is moved away?
TL;DR
- Use a fixed-position left-aligned div as the vertical menu, with icons and nested submenus inside.
- Add hover interactions to expand/collapse the menu, click interactions on icons to toggle submenus, and hover-out triggers to auto-hide submenus for smooth, interactive behavior.
Yes, Webflow Interactions can be used to create a vertical side menu that slides in on hover, reveals submenus when icons are clicked, and hides automatically when the cursor leaves the menu area. Here's how to implement each part using Webflow’s built-in Interactions and Element Triggers.
1. Create the Vertical Side Menu Structure
- Create a div block and position it fixed to the left side of the screen.
- Set its initial width (e.g., 60px) for the collapsed state.
- Inside it, add navigation icons (as buttons or link blocks).
- For each icon requiring a submenu, insert a nested div that serves as the submenu.
2. Slide In Menu on Mouse Hover
- Select the entire menu container.
- Add a Hover interaction using the "Mouse Hover" trigger.
- On hover in, animate the menu’s width to expand (e.g., 200px).
- On hover out, animate the width back to the collapsed size.
3. Reveal Submenus on Icon Click
- Select each icon that should toggle a submenu.
- Add a Click interaction using the "Mouse Click" trigger.
- On first click, set the associated submenu to display: block (or change height/opacity/scale as preferred).
- Optionally add a second click to hide the submenu, or have it auto-hide on mouse out (see next step).
4. Hide Submenus When Cursor Moves Away
- Wrap the submenu and the parent icon in a single parent div.
- Add a "Mouse Hover Out" interaction to the parent div.
- On hover out, animate the submenu to hide (set display to none or revert height/opacity).
- This prevents the menu from hiding immediately when navigating from icon to submenu.
5. Optional: Delay or Smooth Transitions
- Use easing and delays in interactions to prevent flickering or rapid toggling.
- For example, apply a 0.2s delay when collapsing the menu, or add easing functions like "ease-in-out".
Summary
You can fully implement a slide-in vertical side menu in Webflow using Interactions:
- Hover in/out to expand/collapse the menu.
- Click on icons to toggle submenus.
- Mouse out to auto-hide the menu and submenus.
Ensure proper element hierarchy and hover/click trigger priorities for a smooth UX.