How to Webflow: Creating a mobile dropdown menu for Webflow Tabs component - Tutorial (2020)

Поделиться
HTML-код
  • Опубликовано: 5 авг 2024
  • The original thread:
    forum.webflow.com/t/turn-tabs...
    The code i wrote:
    $('.tab-link').on('click', function(){
    tl = $(this).children('.tab-label').text();
    $('.mobile-dropdown-text').text(tl);
    });
    #webflow #webdesign #tutorial
    Join the Pixel Geek Community:
    pixelgeek.community
    -------
    I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
    The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
    -------
    Like what you see? Subscribe here:
    ruclips.net/user/subscription_...
    -------
    / thepixelgeek
    / pxlgk
    pixelgeek.co
  • ХоббиХобби

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

  • @hal-zeitlin
    @hal-zeitlin 4 года назад +10

    I don't have time to watch this now but I just want to say that Pixel Geek is the hero of RUclips and we all ought to budget time to consume his content.

    • @pixelgeek
      @pixelgeek  4 года назад

      Awww thank you so much for your support! 😁♥️🙇🏽‍♂️

  • @danialvereb
    @danialvereb 2 года назад +1

    Hey, this video was phenomenal. Thank you so much!

  • @jpotter12345
    @jpotter12345 Месяц назад +1

    This is gold

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

    Hi Nelson,
    very helpfull. Thank you!

  • @user-ko4yi4uv9f
    @user-ko4yi4uv9f Год назад

    Thank you!

  • @smondello
    @smondello 3 года назад +1

    Thank you!!! This tutorial helped me a lot!!!

  • @shesanosan
    @shesanosan 4 года назад +1

    Thank you for this

    • @pixelgeek
      @pixelgeek  4 года назад

      My pleasure. Thanks for watching 😁🙇🏽‍♂️

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

    🤗🤗🤗 Thank you! Tank you! Thank you! 🤗

    • @pixelgeek
      @pixelgeek  4 месяца назад

      You're welcome 😁

  • @MAli-gd8zu
    @MAli-gd8zu 4 года назад +2

    You are one of my best teacher, your work is fantastic
    Recently i Got a job of where i am using webflow and i am the only one in my region who is using webflow so i was think about your slogan
    (make website beautiful together) i love it, and want your personal guide or a video on best tips and tricks
    Thank you and thanks miss Nelson to giving you permission for live stream.
    Webflow is reliable.

    • @pixelgeek
      @pixelgeek  4 года назад +1

      thanks for your support! :D

  • @Pablo-ly8em
    @Pablo-ly8em 2 года назад +2

    hey guys, how to close the dropdown when clicking on it when opened?

  • @derekyang2679
    @derekyang2679 4 года назад

    Hi Nelson. Thanks for making this video.
    One issue I came across is that, when I set the tab menu to "Display: None"(5:44), it's still there. Do you know why?

  • @brianv.otoole586
    @brianv.otoole586 4 года назад +1

    Also...thanks for a great tutorial!

    • @pixelgeek
      @pixelgeek  4 года назад

      You're welcome!

    • @brianv.otoole586
      @brianv.otoole586 4 года назад

      ​@@pixelgeek any chance you could take a look at my read-only file to see why this isn't working for me? Tried again twice to no avail preview.webflow.com/preview/cambrian?preview=3473e116de7887e460bda8085035eeee&pageId=5ed93ad10c84ff020af691df&mode=preview

    • @brianv.otoole586
      @brianv.otoole586 4 года назад

      @@pixelgeek I updated my share link...it wasnt working. Sorry, and thanks for any help!

    • @brianv.otoole586
      @brianv.otoole586 4 года назад

      Nevvermind! I used to have the 'new tab link' as 'New Tab Link', so my code was 'New-Tab-Link'. That's the only thing I changed, and now it works!
      Um...was that it? No capitals in JS?

  • @hristodimchev4168
    @hristodimchev4168 6 месяцев назад

    Hi Nelson, great "old but gold" video! Is there a way to hide the menu on second click of the blue dropdown menu div, not only from the tab link? I've tried with native webflow interaction, but it doesn't work...

  • @davidamsterdam09
    @davidamsterdam09 4 года назад +3

    Hi Nelson, really liked the video and I have implemented in on my website. Also curious whether you could tell me how to 'hide/close' the tabs without having to select on of the tabs. For example by clicking somewhere else on the screen. Subscribed as well!

    • @liohaan
      @liohaan 3 года назад

      Hey David, I think I solved it myself by adding an interaction to the Body of the page [on click > set Tab List element Hide]

  • @wolfgangderigo1652
    @wolfgangderigo1652 4 года назад +1

    Hey @pixelgeek - love your Tutorials ☺️ I wanna make some tuts in german so i wanted to ask which mic you are using for Voice-Recording? Maybe you can give me a Link ✌️ Thanks

    • @pixelgeek
      @pixelgeek  4 года назад

      Thanks for watching 😁🙇🏽‍♂️ I'm using a Blue Yeti mic.

  • @olehansen6568
    @olehansen6568 4 года назад +1

    Hi Nelson. Is it possible (with code or similar) for the dropdown menu to push the tab content down instead of overlapping it?
    As always great tutorials and very useful...

    • @pixelgeek
      @pixelgeek  4 года назад +2

      Yes. You can set the menu to be position static instead of absolute. Hope this helps 😁

  • @huskerstas
    @huskerstas 8 месяцев назад

    I am missing something...it is only allowing the animation to happen once. So once I show and then hide the menu, it won't show it again. How do I fix this, did I do something wrong?

  • @LisbethP.-db3xk
    @LisbethP.-db3xk 4 месяца назад

    Is this possible with elementor also?

  • @mayurpokle1009
    @mayurpokle1009 4 года назад

    hi nelson,
    i wanted to know more about webflow to magento integration. can you share any information related to this query.

    • @pixelgeek
      @pixelgeek  4 года назад

      I don't know if that's possible. If you really need to use Magento, then you're better off just using Webflow for the front-end design and exporting your code.
      university.webflow.com/article/exporting-a-site-from-webflow

  • @AndresMenard
    @AndresMenard 3 года назад +1

    Is it possible to have the dropdown close when clicking on the dropdown trigger and not just when clicked on one of the dropdown links?

    • @AndresMenard
      @AndresMenard 3 года назад +1

      NVM Figured it out!

    • @pixelgeek
      @pixelgeek  3 года назад +1

      glad you got it figured out :)

    • @conafam
      @conafam 3 года назад

      @@AndresMenard Any chance that you can share how you worked it out. I'm trying and I'm stuck :-(

  • @aleexious2466
    @aleexious2466 4 года назад

    Hi, What's up? it would be great if you make a guide video on integration of Reward Sciences with webflow.

    • @pixelgeek
      @pixelgeek  4 года назад +1

      i'll need to look into this more. I've never used Reward Sciences. But I see that they have a Zapier integration. Have you tried looking into that?

    • @aleexious2466
      @aleexious2466 4 года назад

      @@pixelgeek yeah, you are right, it can be done by Zapier, I am playing with it. Still configuring....