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
- the “Current” link is only the category that is visible in the viewport
- 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:
Here is my published site URL
If any other links would be helpful to share, please let me know!