Interactive slide out navigation with thumbnails

Hi,

I’m only a couple of weeks into my transition from Muse to Webflow and I dove head into interactions. I’m a photographer building a portfolio site and I want to create a 100% width scrollable thumbnail navigation so that users can be viewing one body of work and jump to another without having to have another page load in between. I need some guidance on my approach.

I hijacked one button (called “works”) in the nav widget to serve as the trigger for the slide out div. It works but there are a couple of deal breaking issues. First, if the trigger for the slide out div is on one page (I want it on all pages) then the nav button trigger only affects a single instance of the slide out div (on the first page on which I created the interaction). Second, even if I set the Z level higher than the content on the page, the slide out div appears vertically higher or lower on the page than the content depending on the order in which they are in the navigator. I’m sure the latter is a light newbie issue but the former probably means I’m at a dead end.

Here’s my read only link:
https://preview.webflow.com/preview/charlescohenart?preview=835cfa0dfc3e24dff2f564dab3d21d09

Once you turn on preview mode, the three thumbnails on the page are an example of one row of a body of work to which a user would navigate from a thumbnail. The “works” button triggers the slide out navigation.

Your help is much appreciated.

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/charlescohenart?preview=835cfa0dfc3e24dff2f564dab3d21d09
(how to share your site Read-Only link)

Hi @cacnyc108 rather than building a custom slider, I would recommend utilizing a Lightbox element instead for your gallery so that you can easily link the gallery with other lightboxes on the same page: Lightbox | Webflow University

Thanks for resuscitating my thread! It seems I wasn’t clear. I want a side navigation that uses thumbnails to jump from one body of work to another. I want the side navigation to slide out from the left and to be triggered by a main nav bar button. In my case the button is called “Works”. I’ve got the lightboxes all set. It’s the navigation element that is tripping me up. Does that clarify my issue?

if you load the preview mode of my site and click on “Works” you’ll see what I want and the issue with the way the nav slides out below the content on the page instead of on top. The other issue is that if I use a main nav button as a trigger, the target is page-specific and I can’t target the same element on another page without breaking the trigger on the first page.

Hi @cacnyc108 my apologies for missing that earlier!

I made a quick video to walk you through re-applying that interaction to a different element on a different page, using the same class name: Screen Recording 2018-06-06...

Please let me know if this is helpful :man_bowing:

1 Like

Brilliant, thank you! That makes sense. I added the combo classes thinking that was sufficient to differentiate the instances of that element.

2 questions:

Can I assume I don’t necessarily need the combo class if the elements are just copies of each other?

Regarding the way the slide out element doesn’t want to slide over (on a higher z level) than the content already on the page, I’ve already assigned a z-level to the slide element that is higher than the lightbox elements on the page but it slides in vertically below or above depending on the order in the navigator. What have I done there?

Thanks a million!
Charles

Brilliant, thank you! That makes sense. I added the combo classes thinking that was sufficient to differentiate the instances of that element.

2 questions:

Can I assume I don’t necessarily need the combo class if the elements are just copies of each other?

Regarding the way the slide out element doesn’t want to slide over (on a higher z level) than the content already on the page, I’ve already assigned a z-level to the slide element that is higher than the lightbox elements on the page but it slides in vertically below or above depending on the order in the navigator. What have I done there?

Thanks a million!

Charles