CSS Only Menu in Webflow

[@jonasarleth]

What a sleek and elegant way to implement navigation! 👍

[@jaykaytech]

If webflow was in Olympics you’ll definitely win gold

[@benvsantos]

with record-breaking

[@red1700]

Finding this channel is like finding a hidden gem

[@mihai227]

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.

[@timothyricks]

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.

[@yuvs0]

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!!

[@timothyricks]

Thanks so much! I'm really glad to hear it stayed clear even with the complexity.

[@rodivilin]

Great trick with a great explanation! I will experiment with it, thank you!

[@rafairibarrem]

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!

[@timothyricks]

Oh, awesome! I'm glad this helps! I also have some pre-built navs for Lumos specifically here. www.timothyricks.com/components

[@LukeHallickII]

​@@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?

[@timothyricks]

Hi @@LukeHallickII, is there a space between your dropdown toggle and dropdown content? If so, it could accidentally trigger the hover out.

[@LukeHallickII]

@@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! 😁

[@benvsantos]

This is exactly what I am looking for. thank you.

[@jclewis33]

That is great Timothy. Good use of the has and not selectors. Along with checkboxes.

[@timothyricks]

Thanks so much!

[@bpodkowa]

Thanks Timothy, that is absolute magic ! I already recreated the workspace wide component for my current and future projects.👌

[@romerodesignco]

Love it! You are a great educator Tim, thank you

[@hezychasta]

Above all, a great css lesson for me, thanks. Tim! 💪

[@DANNYFIGDESIGNS]

Timothy!!! Thank you! This is what I was trying to accomplish! 🙏🏼

[@HORDERARII]

Thanks for the helpful materials. You rock, as always!

[@carlos_sepulveda]

Very useful knowledge! I always tune your videos to get CSS tricks :)

[@StineOlsen-d8j]

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!

[@timothyricks]

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

[@danplumadore647]

Thanks again for yet another great video! I’ve learned so much thanks to your generosity.

[@Sergy_Kondrashin]

Woooow! The king! 👑

[@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"

[@ZWlify]

Hi Timothy, great work! Is it possible to make a popup modal with CSS only?

[@OllieAllenFox]

The wizard strikes again...

[@corneromme]

Great video, very creative solution! What are your thought on using the new ‘popover’ attribute for this, Timothy?

[@timothyricks]

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.

[@viscountav]

Hi! new to webflow here. How did the class 'u-container' automagically apply the spacing and sizing details?

[@timothyricks]

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

[@StayUnited12]

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?

[@timothyricks]

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()

[@StayUnited12]

@@timothyricks thanks very much for such a detailed answer. You are a legend!

[@flexagency]

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

[@madhursharma8217]

Hi,should i master javascript,react and gsap with webflow?

[@raymondaxyz]

Very nice 🙂

[@rodivilin]

Unfortunately, it can only be opened with the space bar only. The Enter key does not work. Is it good for accessibility?

[@timothyricks]

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(); });

[@rodivilin]

@@timothyricks The best, thank you!

[@MACH_SDQ]

Very gooooood

[@fpv_jesus]

You’re the best

[@truereflectionmedia]

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.

[@timothyricks]

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.

[@truereflectionmedia]

@@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.