Streaming live at 10am (PST)

Need help with menu design


#1

hi! Tell me, with what triggers can I make the same menu? https://minglabs.com/en/work
The first trigger (to open the menu) hover. I’m interested in the menu inside. How to do the same?



#2

Hi @Bogette great question!

It looks like they have quite a few interactions happening:

  1. Hovering over the W causes three lines to show up
  2. Then in the middle of the screen a scrollable menu shows up which you can scroll down
  3. It looks like scrolling in the nav also scrolls down the page

So essentially you have a hover effect that displays the menu bars and a black screen which sits on top of each section with the name of that section and some scroll in to view animations for the section names. Then hovering out of the menu makes all of the black screen sections fade away to 0% opacity and then display: none.

I hope that this is helpful in getting started :bowing_man:‍♂️


#3

Many thanks, @Waldo! But I remained incomprehensible two actions:

1 - Scrolling in the div-block (the menu itself) is carried out by anchors. Note that there is no familiar scrolling. If you scroll a little, you will be moved to another text. At once. How to do this? How to make an anchor for this?

2 - I’m worried about the lack of understanding how to divide the word into letters? Span - does not help. Using Spans, I can’t use the “move” animation.

For the rest, I have an understanding of how this is done.


And by the way, I would like to make a similar animation, but inside the menu. But I can’t find which tool does the border of the text? How can I create a border?


#4

hi @Bogette, just a tip, it will be a lot easier to follow and help if you can help to share the read-only link, see here: https://university.webflow.com/article/how-do-i-share-my-sites-read-only-link

Thanks in advance,
Dave


#5

hey, @cyberdave! Thank you for joining this ticket
Oh sure. Only I deleted the menu that did.
Because to create this menu I need to solve a few questions. Read my previous question about how to do scrolling through anchors and divide the word into letters. And I would be very grateful to you for this help!