Creating an Expandable Strip with Buttons Using Wix Velo

3 min read

Interactive web design can take your site from functional to unforgettable, and Wix makes it easy to add such features with a touch of Velo. In this tutorial, we’ll explore creating a button-triggered expandable strip, a feature especially useful for mega menus.

I’ll show you how to implement this functionality using Wix Velo, explain its practical applications, and give you an example from one of our designs: Vacation Rentals Manzanita. This site features a custom mega menu built with Velo.

Let’s dive in!

What Are We Building?

We’ll create two buttons that expand corresponding boxes (or strips) when clicked. When the mouse leaves the box, it collapses automatically. This functionality can help simplify navigation or highlight important content dynamically.

Here’s a preview of what you’ll achieve:

Blue Button: Expands a blue box (menu) and collapses the orange box.
Orange Button: Expands the orange box and collapses the blue box.
Mouse-Out Collapse: When the user moves the mouse outside a box, it automatically collapses.

Elements Needed

Before you start working in Wix Velo, set up the following elements on your page:

Blue Button: ⌗button1
Orange Button: ⌗button2
Blue Box (Strip): ⌗menubox1
Set it to collapsed on load.
Orange Box (Strip): ⌗menubox2
Set it to collapsed on load.

The Velo Code

// Blue Button expands Blue Box and collapses Orange Box
export function button1_click(event) {
    $w("#menubox1").expand();
    $w("#menubox2").collapse();
}

// Orange Button expands Orange Box and collapses Blue Box
export function button2_click(event) {
    $w("#menubox2").expand();
    $w("#menubox1").collapse();
}

// Blue Box collapses when the mouse leaves the box
export function menubox1_mouseOut(event) {
    $w("#menubox1").collapse();
}

// Orange Box collapses when the mouse leaves the box
export function menubox2_mouseOut(event) {
    $w("#menubox2").collapse();
}

Step-by-Step Instructions

1. Set Up Your Buttons

Add two buttons to your Wix page. Assign them the IDs ⌗button1 (Blue Button) and ⌗button2 (Orange Button). You can do this by selecting each button, going to the Properties Panel, and entering the respective IDs.

2. Add Boxes or Strips

Add two boxes or strips to your page, each corresponding to a button. Assign them the IDs ⌗menubox1 (Blue Box) and ⌗menubox2 (Orange Box).

In the Settings Panel, set both boxes to collapsed on load.

3. Write the Velo Code

Go to the Code Panel in Wix and paste the code above. This Velo code will:

Expand the box connected to the clicked button.
Automatically collapse the other box.
Collapse the box when the mouse moves outside of it.

4. Test It

Preview your site and test the functionality:

Clicking a button should open the respective box.
Moving the mouse outside the box should collapse it.

Practical Example: Vacation Rentals Manzanita

This technique works perfectly for mega menus, as seen on the website Vacation Rentals Manzanita, which we designed. The site's mega menu dynamically expands and collapses, ensuring a clean, user-friendly navigation experience.

Check it out for inspiration!

Why Use This Approach?

This approach is:

Clean and Professional: Avoid cluttered navigation menus.
User-Friendly: Intuitive interaction for visitors.
Flexible: Works for navigation, FAQs, or highlighting content.

Final Thoughts

Adding dynamic elements like expandable strips can significantly enhance your website's usability and aesthetics. With just a bit of Wix Velo, you can create powerful features tailored to your needs.

If you'd like help implementing this or other custom features, feel free to reach out through our website, WIXCreate.

Happy coding with Velo!