Slide out navigation with corresponding content inside drawer

Design help Animations & Interactions
1

Hi,

Here’s is what i’m working on :

https://webflow.com/design/demo121?preview=6713d74fc4f86985fd2bf5d40c44a969

  1. If you click on How To, you will see the nav menu opening from the left of my NavBar. I would like to make it open from the right and to the right.

  2. Is it possible to have several NavMenu. I would want one NavMenu for HowTo, another for Courses, etc.

Here’s an exemple of what i’m trying to do : https://cs50.harvard.edu/
Click on FAQ. (The position, not the animation)

Thank you,

Jonathan Girard

2

Correct me if I am wrong… want to clarify what OP is saying.

Currently, when you select a Menu Item… the menu appears at the left side of the current menu.

OP wants the menu to appear - on the right side.

I’m thinking… if you position a hidden to the right of the menu…
on menu item click - run an interaction that makes the hidden div visible.

3

I didn’t take time to put lipstick on the demo

  • and it also requires removing the Nav option…

There’s probably a better way of doing it…

but here is a simple 2 DIV system you can use.

It works. Obviously you will need to play with it and adjust to your needs.

Each menu item would have it’s own DIV. So 10 menu items… 11 DIV’s total

1 for the Main Menu… 1 for each Menu Item.

http://quick.as/9pq9cdbp

4

Hi Jon, Great question! The Nav Bar widget is a great starting point for beginner level navigation design. But your example is a bit more complex and, although the navbar could be used, it might not be the best option.

In addition to @Revolution’s post, you could try using interactions. Have you had a chance to play around with interactions yet? if not, here is some info on it: http://interactions.webflow.com
Interactions & animations course | Webflow University

If you are familiar with interactions, I would try to use the tabs widget and when the tab is opened, slide the tab contents out from the side. I made a small demo for you:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Tabs Drawer

I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Will

5

Thanks, that is great!

I have a problem though, i can’t find any information about interactions on my webflow site.
Not in setting and if i try another object it does not work also. When i go on your exemple, i don’t see anything also!

1920×1200 120 KB

https://webflow.com/design/demo121?preview=6713d74fc4f86985fd2bf5d40c44a969

Thanks,
Jon

6

Hi @Jon104, this article might be helpful: http://help.webflow.com/general/designer-user-interface#global-objects-tab

Take a peek at the Global objects tab in the right side panel :slight_smile: