Jonathan Tsodikovitch profile image

Jonathan Tsodikovitch

Product Manager

,

Feb 6, 2022

Sliding navigation.

Follow along with Product Manager Jonathan Tsodikovitch as he takes you through the steps to create a sliding navigation menu using Velo. In this tutorial, the menu we create slides out from the right side of the page when users click the icon.

How to create a sliding navigation.

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.

Jonathan Tsodikovitch profile image

Jonathan Tsodikovitch

Product Manager

I’m a Product Manager for Editor X. I have a Bachelor’s Degree in Instructional Technology from HIT. During my free time, I enjoy hiking, camping, and snowboarding. I live by the motto “coffee on workdays, tea on weekends."

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.