Vertical Navigation to reveal only from Specific Section

Design help Animations & Interactions
1

Hello Dear Friends,

Please guide, how this should be done, I want to have sidebar/ vertical navigation that will only appear from specific section.

For instance,

image
image981×521 22.4 KB

As seen on this screenshot, let’s say I want to reveal VERTICAL NAV only from Understand Section, and let it fix throughout the rest of the sections.

Here is my public share link: LINK
(how to access public share link)

2

You will want to have a div that wraps the sections with the navigation. Then use sticky property to keep this navigation in view while the wrapper is in view.

3

Hey, thanks for your reply, I want to animate to reveal the navigation on different section.
Any suggestions how this should be done?

4

Many different ways to do this but generally:
You will need to use a scroll-into interaction or use some clickable element to make the navigation appear.

For a scroll animation, you’re just telling the navigation to move into view.

For a button/icon
The button will use the Element Trigger = Mouse Click (tap)
This element will tell the Navigation element to grow from 0px width to Auto.
You will then need to give the trigger element a 2nd-click animation that tells the navigation to close, by shrinking from Auto to 0px width.

The navigation can be set to overlap your page elements or it can push your page elements over to the side.

Again, this is very general. There are numerous ways to set it up.

5

Thanks man, I will give a try and let you know, if further guidance required

6

This video explains the concept but you’d be “growing” with size property.