Custom Side Navigation

Design help General
1

Hi fellow webflowers,

I wanted to create custom side navigation and I was wondering how would you go about making something like this?

thank you!

2

Hey @John_T,

It really depends on what exactly you want to achieve, and what structure your website has. Nevertheless, I took some time and came up with this:

  1. Created a navbar out of divs, link blocks and links. Gave it width of 60px.
  2. Created a hover IX (interaction) to “open” on hover (Width change on hover to 400px)
  3. Gave a high z-index (100) to the navbar.
  4. Added an empty element to trigger the “peaking” interaction. Placed it right behind the navbar with width of 300px and gave it a z-index of 99 (so the peaking won’t occure when the navbar is open).
  5. Added inner elements to the navbar and gave it an overflow:hidden.
2 Likes
3

Awesome man thank you so much!
This helped quite a lot actually!

I think I’m almost there!

1 Like