Creating a sliding menu using Velo

Part 1: Create the section or page.

Set up your section or page. In this example, we’re using a simple, two-column section with a Stack containing text on the left and a transparent video on the right.

Part 2: Set up the menu and button.

1. Drag in a container from the Add panel

2. Set the background color

3. Dock the container to the top of the section

4. Set the top margin to 0px so the container is touching the top edge of the section

5. Change the container’s Position type to Pinned

6. Pin the container to Page

7. In addition to the docking to the top, dock the container to left and right with margins of 0px on either side

8. Set the container’s height to 100vh and make sure the minimum height is set to None

9. Apply a 2X1 grid to the container so there are 2 columns

10. Change the Column Width of the left column from 1fr to 5%

Note: In this example, we want the sliding panel to appear on the right side of the screen. If you want it to appear on the left, then change the column width of the right column instead. Then continue with the following steps on the opposite side to the one we’ve said.

11. Add your menu items to the right column. In this case we used 3 buttons and stacked them

12. With the Stack selected,  set the size to 100% width

13. Make sure the margins are set to 0

14. Add a container to the left grid column and stretch it to fill

15. Add the clickable element that will work as the button to expand and collapse the sliding menu. In this example, we’re using a two line menu and rotating it 90 degrees to be vertical

16. Resize and align the shape to the middle

17. Select the container that has the two-column grid and undock it from the left side

18. Make sure the width is 100vw

19. Add a margin to the right of -95% so the right grid column moves off the canvas, but the left column with the button is still visible

Part 3: Rename elements in Velo.

It’s a good idea at this point to rename elements by setting up element IDs in Velo.

1. Turn on Dev Mode

2. Change the main container’s element ID. We’ll call it nav

3. Change the button’s element ID. For this one we’ll use navOpen

Note: Before moving on, check that the navigation bar looks the way you want it to at each breakpoint.

Part 4: Create the sliding navigation with Velo.

1. Copy and paste the following code snippet:

import wixAnimations from 'wix-animations';

import wixWindow from 'wix-window';

let navTimeline;

let screenSizeInterval;

$w.onReady(function () {

      let open = false;

      $w('#navOpen').onClick(() => {

            if (open == false) {

            screenSize();

            screenSizeInterval = setInterval(screenSize, 500)

            open = true;

      } else {

            clearInterval(screenSizeInterval);

            navTimeline = wixAnimations.timeline().add($w('#nav'), { x: 0, duration: 300, easing:    'easeInOutCubic' }).play();

            open = false;

      }

})

function screenSize() {

      wixWindow.getBoundingRect()

            .then((windowSizeInfo) => {

                  let windowWidth = windowSizeInfo.window.width;

                  navTimeline = wixAnimations.timeline().add($w('#nav'), { x: -(windowWidth * 0.95), duration: 300, easing: 'easeInOutCubic' }).play();

            });

      }

});

2. If you used element IDs other than nav and navOpen, don’t forget to adjust them in the code snippet

A closer look at what’s happening in Velo:

For a more in-depth look at Velo and the APIs being used in this tutorial, click here.

Result: In preview mode, when you click on the menu icon, the navigation menu will pop out from the left. When you click the icon again, the menu will slide back to the right and close.

Note: You can change the duration and easing to suit your design. Also remember that if you change the container size, you need to readjust the negative margin and adjust the windowWidth in Velo.