Hamburger Menu Items as ANCHORS - Is THIS Possible in Figma? (Click to Scroll Down)

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 24

  • @mavidesign
    @mavidesign  Год назад +4

    There seems to be a solution to the "menu not closing after clicking" problem: you have to set the scroll interaction on "Mouse down" on the INSTANCE level and then go to the "header" component where you set "Mouse up" to change to the "closed" variant on all the section buttons. Also, for some reason the scroll interaction is not working when you set the "Animate" type. You need to select "Instant". Also important to set the component state change interaction on the component level (not the instance level).
    Big thanks to Jono Young for suggesting this solution!

    • @Sabrina-uh7fr
      @Sabrina-uh7fr Год назад +3

      I did not quite understand this, is it possible to do a short video to address the solution please?

    • @jacquelinemendez3962
      @jacquelinemendez3962 4 месяца назад +1

      @@Sabrina-uh7fr I know its a late response, but here is what works for me...for each individual section, add the interaction "mouse down" -> "change to" -> "Property 1: closed" -> "instant"

  • @SarahAndBoston
    @SarahAndBoston 3 месяца назад

    Thank you this is just what I needed to learn!

  • @juh88br
    @juh88br 7 месяцев назад

    You saved my presentation for tomorrow! Thank you soooooooooooooo much!

  • @justjunnnt
    @justjunnnt 7 месяцев назад

    Thank you very much! This is exactly what I need! Awesome tutorial

  • @loomonda18
    @loomonda18 Год назад +1

    You addressed the problem I was having (with the component section not being able to link to the individual elements on the page), but my issue is how to combine an effect (ex changing colour text when clicking) WITH the single page anchor links....having a very hard time with this

  • @ericaleman3440
    @ericaleman3440 10 месяцев назад

    You could try making the section buttons in the component instance Ali’s lead back to the closed menu like the x button does

  • @lanenaamorcita
    @lanenaamorcita Год назад

    Tnx Mate you saved my day! I'being looking at how to solve this puzzle! You have valuable content!

  • @harrymorgan595
    @harrymorgan595 Год назад

    Your biggest fan, awesome Job bro

  • @kylequinn5629
    @kylequinn5629 Год назад +1

    This is a very helpful tutorial! However, I am still running into another issue when using this design. While I want to use the hamburger menu to act as an anchor to scroll to specific elements on screen, I also have other frames that the hamburger menu navigates to.
    In my menu, I have multiple elements that navigate to different parts of my design. Some of the menu elements act as anchors to sections of the current page its on, while others navigate to a different frame. However, when I navigate to a different frame, and want to navigate back to the pervious page where the anchored element exists, the link to the anchored element is broken because now I am on a different frame and cannot scroll to it. *Is there a way to allow elements to have the "scroll to" feature when that section is on the page, and then that same element have a "navigate to" feature when show on another frame?*

  • @agneshrtn
    @agneshrtn Год назад +1

    Finally! Thank you :))

  • @desventurasdati
    @desventurasdati Год назад +1

    Very nice video! Thank you for sharing.
    To close the menu after click we can use the interaction After delay

    • @mavidesign
      @mavidesign  Год назад +1

      Great point, though about that as well! I just didn't know how long should the delay be to give the user enough time & not make it too long at the same time 👀

    • @WePiphany
      @WePiphany Год назад +1

      You could also use the click interaction to jump down the page, then apply the mouse up interaction to trigger the closed state.

    • @mavidesign
      @mavidesign  Год назад +2

      @@WePiphany wow great point, I didn’t realize that! Thanks!

  • @ОляГуляева-б8ъ
    @ОляГуляева-б8ъ Год назад

    I'm so grateful for this video!!! I was annoyed all day by no function... This is just no video about this on slavic youtube. And also thanks me for knowing english anyway

  • @kaif-abdullah
    @kaif-abdullah 5 месяцев назад

    hey, I want to open a new page with a button and it should automatically scroll to a certain section of that new page. Could you plz guide how to do that.

  • @basti19836
    @basti19836 Год назад

    Great tutorial!

  • @WePiphany
    @WePiphany Год назад

    Can you add a delay after each scroll click interaction that closes the menu overlay?

  • @ShinAtRod
    @ShinAtRod Год назад +1

    When I put my variant to "close" and open the preview its not working anymore, but when i let it as "open" it does work. So that means everytime when I open the preview, the menu is always opened at the beginning. How can i set it as closed and it would still work? PS thank you very much for this tutorial! It helped a lot!

    • @halelvak9170
      @halelvak9170 8 месяцев назад +1

      Any chance you have an answer for this? I'm having the same issue

  • @YILMAZ.KOSHUA
    @YILMAZ.KOSHUA 9 месяцев назад

    great, thank you!

  • @arnobchak
    @arnobchak 11 месяцев назад

    I tried but didn't work