Vertical Nav Bar with sliding menus

Publishing help General
1

Hello All,

I am looking at implementing a vertical side menue into my sight that slides in when the mouse hovers, Clicking on an icon in the menu would then slide out the sub menu that pertains to that icons subsection and whn you move the curser away, the menu hides automatically.

Is this something that can be done through webflow interactions? especially since each icon in the menu will have a different submenu that will take up the same “space” as the other sub menus but would only display when the pertaining icon is clicked.

Thanks in advance!
J

2

Yeah sounds like it can be done! You’ll have to set up a lot of conditions to make sure it behaves the way you want. Note: hover doesn’t work for mobile so take that into consideration.

3

Thanks for the reply!

I figured out how to get the main menu to slide out, but having the submenu slide out to the side that has different options depending upon which Icon is clicked is not behaving as easily :smile:

I am figuring that the submenu will not be “stacked” on top of each other, but I am having a dificult time trying to figure out how to set it up…

Any ideas?

J

4

Might actually be able o use the tabbed widget when it is released to accomplish this. Will there be an option as to where the tabs are positioned in relation to the “windows” the tabs correspond to? Above/below/left/right orientation to the windows?

Thanks
J

5

Yes, you can drag the tab menu to the bottom or to the top and float it left or right.

1 Like
6

Thanks for the response @thesergie!

I am looking to see if you can put the menu itself in a separate Div so that it lines up vertically…that way the tab 1 is on top with tab 2, 3, 4, 5, etc… below them…almost like a vertical menu next to the tab containers. This function might also be utilized for a vertical menu and submenues.

Any plans for placing images in the tabs? somewhat similar to icons that can be selected?

J

7

Are you trying to create something like this?

989×277 61 KB

1 Like
8

yes!

That is exactly the layout I was looking for!

J

9

Select the tab menu block and make it Float left. Then give all the buttons the same class and give them more padding. You can also drag images into these tab buttons.

10

Hi Sergie, Thank you for this great explanation. I created the tab as per your image but ideally, I would like the Tab Pane 1 be displayed under the Tab Link 1, then the Tab Pane 2 be displayed under the Tab Link 2, etc. Is that possible to do?

I tried to change the position of the Tab Pane 1 only but apparently it is not possible to separate the whole Tab Pane Block.

Thanks!

11

Hi I just tried this, did not work? Should I do this now with Flex box?