Horizontal Swiping/Scrolling with accompanying Nav Menu

Design help Animations & Interactions
1

Hi!

I’m working on a menu page for a restaurant, and I’m trying to figure out how to build an interaction (that looks like this: https://youtu.be/fqmV-a-4Pv4).

I wanted to arrange the menu category divs horizontally so that people can swipe left/right to navigate between them (on mobile devices). And while they swipe, the nav menu on top is synced to the swiping.

After using a grid to set up a horizontal layout for the menu categories, I realized that I have a problem: the “Current” state is applied to ALL of the categories…what I wanted was for only the centered category (centered in the viewport) to be labelled as “Current”

I guess that all of the categories are recognized as “Current” because they’re all at the same vertical position. So, if I was wondering if there’s anything I can do so that

  1. the “Current” link is only the category that is visible in the viewport
  2. when I click on a link in the nav menu, it horizontally scrolls to the linked div

Thanks so much in advance!

Please shrink the viewport so that the right design shows up!

Here is my site Read-Only:
https://preview.webflow.com/preview/mala-hotpot?utm_medium=preview_link&utm_source=designer&utm_content=mala-hotpot&preview=cf19559857b8f7214c131b7db3cefe5c&pageId=619bd3b85e50c849320a526c&workflow=preview

Here is my published site URL
https://mala-hotpot.webflow.io/menu

If any other links would be helpful to share, please let me know!

2

Swipe and change pages are impossible - or - at least very complex to solve (The page refresh when you change a page).

You will find ideas like this on framework7 or unsen ui (Mobile Apps frameworks):

–
For one page with menu categories (Not swipe to change pages) - you could use slider.

You could solve this with swiper (But no way to explain how - 2 sliders that control each other - the basic idea (Gallery - but will work the same for navs):

/* set conteoller  */
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;

1 Like
3

Hi Ezra,

I’m looking for a solution to the second idea you mentioned – one page with menu categories.

Thanks so much for the suggestion to use a swiper! (And thanks for providing an example with code as well!)

I would have never thought of that on my own, and it seems great for what I need! I’ll look more into swipers and see if I can get it to match what I’m thinking!