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
- Create a fixed left-side wrapper with a sliding menu and hidden submenus for each clickable icon.
- Use hover interactions to slide the menu in/out, click triggers to toggle submenu visibility, and timed hover-out animations with delays and buffer zones to auto-hide smoothly.
Yes, Webflow interactions can be used to create a vertical side menu that slides in on hover, reveals submenus on click, and hides on mouseout. Here's how to set this up using Webflow Interactions 2.0.
1. Structure Your Elements
- Create a parent
div(e.g.,side-menu-wrapper) and position it as fixed to the left. - Inside that, create a menu panel (
side-menu) that will slide in/out. - Add menu icons (like SVG or divs) that will act as clickable triggers for submenus.
- For each icon, create a corresponding submenu panel (
submenu-div) hidden by default.
2. Create Slide-In on Hover Interaction
- Select the
side-menu-wrapper. - Go to Interactions > Element Trigger > Mouse Hover.
- On Hover (Mouse In):
- Add a Move or Show interaction to slide the
side-menuin from the left (e.g., move from -200px to 0px). - On Hover Out (Mouse Out):
- Add a Move Out or Hide interaction to slide it back to the left.
3. Add Click-to-Reveal Submenus
- Select each menu icon.
- Add an Element Trigger > Mouse Click (Tap).
- Set it to Toggle visibility of its related
submenu-divusing Hide/Show and Opacity. - Optionally add a Rotate or Transform effect for more animation.
4. Auto-Hide Menu on Mouse Leave
- Select the main
side-menu-wrapperor its container. - Add another Mouse Hover Out interaction.
- Add a Move or Hide animation after a delay (e.g., 200ms) to allow for submenu clicking.
- Be cautious: This needs to be well-tuned to avoid hiding while interacting with submenus. Use hover states and buffer zones (invisible elements) to avoid accidental hide.
5. Use States and Delays Strategically
- Use Timed Animations with delays to buffer the mouseout trigger — this helps prevent the menu from closing too fast.
- Use a nested structure or helper divs (e.g., invisible but interactable containers) to avoid triggering unwanted mouseout events.
Summary
You can absolutely build a hover-activated vertical side menu in Webflow with clickable submenus and auto-closing behavior using Interactions 2.0. The key is to combine Mouse Hover, Click, and Timed Animations with carefully structured elements and delays to ensure smooth interactivity.