What a sleek and elegant way to implement navigation! 👍
@jaykaytech3 ай бұрын
If webflow was in Olympics you’ll definitely win gold
@benvsantos3 ай бұрын
with record-breaking
@red17003 ай бұрын
Finding this channel is like finding a hidden gem
@rafairibarrem3 ай бұрын
Man, are you reading my thoughts? I was just searching to check if there was a lumos guide on building navs. You're indeed a true Wizard!
@timothyricks3 ай бұрын
Oh, awesome! I'm glad this helps! I also have some pre-built navs for Lumos specifically here. www.timothyricks.com/components
@LukeHallickII3 ай бұрын
@@timothyricks Hi Tim! I recently added your Nav 2 component to a project I'm working on but I can't get the nav dropdown menu to stay open when I hover off of the nav_2_dropdown_toggle. Anything you think I might be missing?
@timothyricks3 ай бұрын
Hi @@LukeHallickII, is there a space between your dropdown toggle and dropdown content? If so, it could accidentally trigger the hover out.
@LukeHallickII3 ай бұрын
@@timothyricks Turns out it was a nav that I had built out prior to adding the "Nav 2" component that was interfering with the interaction. Works like a dream now! 😁
@yuvs03 ай бұрын
This is gold. Paced so well and very well-thought out with how you approach bringing in new concepts: never going full complexity to begin with but working up to it in steps and substitutions. So helpful!!
@timothyricks3 ай бұрын
Thanks so much! I'm really glad to hear it stayed clear even with the complexity.
@HORDERARII3 ай бұрын
Thanks for the helpful materials. You rock, as always!
@mihai2273 ай бұрын
Nice work Timothy, absolutely in love with your content. For display none transition we can use "transition-behavior: allow-discrete" to not have that instant transition.
@timothyricks3 ай бұрын
Thanks so much, and great suggestion! I saw transition-behavior in a recent Kevin Powell video. It's not supported yet in Firefox so it would have a hard cut there instead of a transition, but as long as we're okay with that trade off, I think it's a great solution. It just recently gained support in the latest version of Safari so I'm sure it will be supported in all the major browsers soon.
@Edozie-h7g19 күн бұрын
Awesome! Great work Timothy. This is sleek! I'm definitely going to use this in one of my projects. Thanks a million man.
@rodivilin3 ай бұрын
Great trick with a great explanation! I will experiment with it, thank you!
@jclewis333 ай бұрын
That is great Timothy. Good use of the has and not selectors. Along with checkboxes.
@timothyricks3 ай бұрын
Thanks so much!
@bpodkowa3 ай бұрын
Thanks Timothy, that is absolute magic ! I already recreated the workspace wide component for my current and future projects.👌
@romerodesignco3 ай бұрын
Love it! You are a great educator Tim, thank you
@hezychasta3 ай бұрын
Above all, a great css lesson for me, thanks. Tim! 💪
@DANNYFIGDESIGNS3 ай бұрын
Timothy!!! Thank you! This is what I was trying to accomplish! 🙏🏼
@benvsantos3 ай бұрын
This is exactly what I am looking for. thank you.
@carlos_sepulveda3 ай бұрын
Very useful knowledge! I always tune your videos to get CSS tricks :)
@tgk21727 күн бұрын
oh man what a another valuable trick! Thank you Timothy, i think i have to join to your patrone's finally :)
@danplumadore6473 ай бұрын
Thanks again for yet another great video! I’ve learned so much thanks to your generosity.
@StineOlsen-d8j3 ай бұрын
Wow, this is great! Could you please make a video on how to build an accessible accordion using only CSS? I'd love to see your approach!
@timothyricks3 ай бұрын
Great suggestion! For now, here's a cloneable for a CSS-only accordion using this same technique. CSS Only Accordion Cloneable (affiliate link) try.webflow.com/tricks?path=css-only-accordion
@timdaffАй бұрын
Incredible! 🤩
@OllieAllenFox3 ай бұрын
The wizard strikes again...
@Sergy_Kondrashin3 ай бұрын
Woooow! The king! 👑
@ZWlify3 ай бұрын
Hi Timothy, great work! Is it possible to make a popup modal with CSS only?
@MarcAndrews-b6sАй бұрын
If you want to edit the nav or any checkbox style dropdown without having to change the css you can add an attribute checked="true"
@raymondaxyz3 ай бұрын
Very nice 🙂
@corneromme3 ай бұрын
Great video, very creative solution! What are your thought on using the new ‘popover’ attribute for this, Timothy?
@timothyricks3 ай бұрын
Thank you! Both are great solutions. Popover is at 86% browser support and :has() is at 92%. Popover also requires us to assign a unique id to each target and trigger item which could make it harder to use for things like a popup inside each card item for instance, while :has() connects elements through dom structure instead of ID.
@flexagency3 ай бұрын
We could start using the “popover” HTML attribute instead of relying on fake input fields to manage this kind of interaction. I’ve already implemented it for modals, and the same concept can be applied to mobile menus I think. Need to test it
@fpv_jesus3 ай бұрын
You’re the best
@madhursharma82173 ай бұрын
Hi,should i master javascript,react and gsap with webflow?
@MACH_SDQ3 ай бұрын
Very gooooood
@viscountav2 ай бұрын
Hi! new to webflow here. How did the class 'u-container' automagically apply the spacing and sizing details?
@timothyricks2 ай бұрын
Hi, I created the u-container class on a div that had no other classes and applied some styles to it. Then when I stack the u-container class on top another class, it gets the original styles. This is how reusable utility classes are created in Webflow. I have a tutorial on it here. kzbin.info/www/bejne/h6LUfGZmfNWahrssi=8HuMAlfE25wMhU2q
@rodivilin3 ай бұрын
Unfortunately, it can only be opened with the space bar only. The Enter key does not work. Is it good for accessibility?
@timothyricks3 ай бұрын
Screen Readers announce that it's a checkbox which are expected to work with spacebar only. But we could make it work with enter key also by adding a simple script. $(".faq_card_checkbox").on("keydown", function (e) { if (e.key === "Enter") $(this).click(); });
@rodivilin3 ай бұрын
@@timothyricks The best, thank you!
@StayUnited123 ай бұрын
This is a great tutorial like always! One question though: it seems like a lot of workaround to come up with this solution. Doesn’t it affect load speed and SEO of the webpage?
@timothyricks3 ай бұрын
Thank you! Using CSS instead of Webflow Interactions or JavaScript can actually improve the load speed of the website and improve the performance after the page is loaded also. JavaScript vs CSS Interactions shouldn't make a difference for SEO though. The checkbox method to reveal content is pretty common in traditional development. This specific interaction uses css :has() which is currently at 92% browser support. So it would work in most but not every browser. caniuse.com/?search=%3Ahas()
@StayUnited123 ай бұрын
@@timothyricks thanks very much for such a detailed answer. You are a legend!
@truereflectionmedia3 ай бұрын
I think I'm missing something. How are the links still not in the tab order by just shutting opacity off ? When using a keyboard I still manage to have to tab through links in tab order. and how is the trapped focus being handled as well with this approach.
@timothyricks3 ай бұрын
Oh, thank you for letting me know. It looks like turning down opacity just hides the focus outline but doesn't disable focus like I thought. I updated the cloneable so that it can transition and use display none to disable focus.
@truereflectionmedia3 ай бұрын
@@timothyricks the last question is about trapping focus, which I think may be impossible to do without JS. As a custom Nav is a fancy modal but with Navigation elements. Without trapping the focus the rest of the links on the page can be tabbed. I ahven't tried it yet but I wonder if a custom element - Dialog can be placed in the Nav element and be the easiest solution.