Wix Studio Submenus: Achieving Horizontal Expansion with Velo Code

Understanding the Wix Studio Submenu Challenge

Wix Studio offers powerful tools for creating dynamic websites, but sometimes default behaviors don't align with desired design outcomes. A user on the Wix Studio community forum (https://forum.wixstudio.com/t/when-creating-submenus-in-wix-studio-items-open-one-below-the-other-when-you-hover-over-them-with-the-mouse-instead-of-expanding-sideways/75841) encountered a common issue: submenus within submenus stacking vertically instead of expanding horizontally. This can lead to a poor user experience, especially on complex navigation structures.

The default behavior of Wix Studio is to display nested submenus in a cascading, vertical manner. While functional, this might not be ideal for all designs. Many store owners and developers prefer a horizontal expansion for better readability and ease of navigation. This article analyzes the problem and provides a Velo code solution, based on the forum user's successful implementation.

The Solution: Velo Code for Horizontal Submenu Expansion

The forum user successfully addressed this limitation using Wix Velo, Wix's built-in JavaScript-based development platform. By adding custom code, they were able to override the default submenu behavior and force a horizontal expansion. This approach offers a flexible way to control the submenu's appearance and functionality.

Step-by-Step Instructions: Implementing the Velo Code Solution

Here's a breakdown of the steps involved, based on the forum user's shared solution. Note: Ensure you have Wix Velo enabled in your Wix Studio editor.

1. Add a Button to the Submenu: Inside your Wix Studio editor, add a button element to the submenu you want to control. This button will act as the trigger for the horizontal expansion. Assign it a unique ID, for example, btnSubMenu.
2. Enable "Wrap Content" in Submenu Settings: Access the settings for the submenu container. Locate and enable the "wrap content" option. This allows the submenu to adjust its size based on its content.
3. Place a Container Box: Add a container box next to the submenu box. This container will hold the submenu items that will be displayed horizontally. The exact placement is up to you, depending on your design. Assign this container a unique ID, such as boxSubMenu.
4. Add the Velo Code to masterPage.js: Open the masterPage.js file in your Wix Studio editor. This file contains code that applies to all pages on your site. Paste the following code into the file:

let closeTimer = null;

$w.onReady(() => {
  $w('#boxSubMenu').hide();

  $w('#btnSubMenu').onMouseIn(() => {
    if (closeTimer) {
      clearTimeout(closeTimer);
      closeTimer = null;
    }
    $w('#boxSubMenu').show("fade", { duration: 150 });
  });

  $w('#btnSubMenu').onMouseOut(() => {
    closeTimer = setTimeout(() => {
      $w('#boxSubMenu').hide("fade", { duration: 150 });
    }, 500);
  });

  $w('#boxSubMenu').onMouseIn(() => {
    if (closeTimer) {
      clearTimeout(closeTimer);
      closeTimer = null;
    }
  });

  $w('#boxSubMenu').onMouseOut(() => {
    closeTimer = setTimeout(() => {
      $w('#boxSubMenu').hide("fade", { duration: 150 });
    }, 500);
  });
});

Explanation of the Code:

• The code uses onMouseIn and onMouseOut event handlers to detect when the mouse hovers over the btnSubMenu button and the boxSubMenu container.
• When the mouse hovers over btnSubMenu, the boxSubMenu container is displayed using a fade-in animation.
• When the mouse moves out of btnSubMenu or boxSubMenu, a timer is started. If the mouse doesn't re-enter within 500 milliseconds, the boxSubMenu container is hidden using a fade-out animation. This prevents the submenu from disappearing immediately if the mouse briefly moves outside the button or container.
• The closeTimer variable is used to prevent multiple timers from running simultaneously, which could cause unexpected behavior.

Insights for Store Owners and Developers

This solution highlights the power and flexibility of Wix Velo for customizing Wix Studio websites. While Wix Studio provides a user-friendly interface, Velo allows developers to overcome limitations and implement custom functionality.

• Customization: Velo enables store owners and developers to tailor the user experience to their specific needs, going beyond the standard Wix Studio features.
• Improved Navigation: Horizontal submenus can significantly improve website navigation, especially for sites with extensive content.
• Enhanced User Experience: By providing a more intuitive and visually appealing menu structure, you can enhance the overall user experience and engagement.

By understanding and implementing this Velo code solution, Wix Studio users can create more sophisticated and user-friendly navigation systems for their websites.