No JavaScript, No Hacks Hamburger Menu Interaction

Подписаться 1,1 млн

Просмотров 20 тыс.

50% 1

bit.ly/410u02U 👈 Design & code like me. Use "BF2023" for 50% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, I'm going to show you an entirely new way to create interactive menu reveals with the new HTML popover. Caution: You cannot use this in production yet, as it's not supported in Firefox and does have accessibility issues. However, it's always intriguing to see how we'll be handling these common interactions in the future!
0:00 - Intro
0:33 - HTML
3:05 - CSS
Let's get started!
#frontend #css #html
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

11 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 46

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

W3C is currently debating the mental model of the CSS Anchor Positioning Module. When that is done and browsers have implemented it we will be able to anchor absolute positioned elements to other elements in the DOM, using nothing but CSS. This will make the Popover API so much more useful since we currently must rely on the viewport to position popover elements.

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

W3C consortium should slowly recognize the modern needs of web interfaces and port every single unnecessary duck tape solutions of frontend design back to HTML and CSS. So more than ever, learning web development is much kinder and easier for future generation developers and the future of the platform will be lighter, less JavaScript and more closer to the metal

@user-il9qo4qc4n 7 месяцев назад

No. Javascript is fine. It's the native language of the browser.

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

really intressting. I am now a html developer ;3

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

Promising! But you don't need this role attribute. The "menu" role is more suited for applications menu bars rather than website navigations. The nav element already has its own role (navigation).

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

This is great

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

golden!!

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

What about Dialog element. It is supported in all browsers and has better accessibility

@ea.mp3 7 месяцев назад

sure, but it needs javascript to open and close.

@j-janz 7 месяцев назад

@@ea.mp3Only as modal. You can declare it open in HTML and not displayed in CSS and, then, display it if a sibling gets focus or whatever other condition.

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

but did you get to barkeeper's submission though?

@AnuragSinha-fj5rw 7 месяцев назад

waiting for advance frontend course 👋

@Anth-ony 7 месяцев назад

Why can't you learn how to alt+tab between windows!? It's been driving me crazy over the years (not just you but other developers too). When switching between your editor and chrome, just alt+tab instead of wasting those precious seconds moving your mouse to hover over chrome and then selecting the needed window. Such a pet peeve of mine 😝especially when we learn all these other shortcuts within the workspace. The content of the video does look promising for the future though...very cool.

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

Crazy

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

#suggestion try "Aesthetic" vs code theme. 😊

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

Cool

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

Why you dont just use label (as button) with input-checkbox to trigger the menu with something like input:checked + nav{} ? Works everywhere, no JS needed, deadly simple...

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

Because "no weird check box hax" [0:08] 🙃

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

@@eddie_thinhle wait, valid css, that works logically and on every browser of the past 10 years count as "weird hack" ?

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

I think the checkbox label might be easier...

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

But not accessible

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

But dad. We love javascript.

@bruh-qi7ue 7 месяцев назад

what's the theme? This looks like atom's one dark which is what I used before switching to vscode

@r-i-ch 7 месяцев назад

Is this HTMX? Web components?

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

nope, just pure html & css.

@user-il9qo4qc4n 7 месяцев назад

Could you stop with the click-bait thumbnail please? Also CSS only menus have existed for over 10 years.

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

What's clickbait about that ? Have you watched the video ? It's exactly what it says.

@user-il9qo4qc4n 7 месяцев назад

@@HeinekenLasse 'Future of Frontend' is a clickbait title. This isn't the future of the entire front end profession is it? It's another way of doing something we have been doing for years. I'm just sick of large content creators treating their audience like idiots.

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

@@user-il9qo4qc4n he's not treating us as idiots, actually, it's a proven mental trigger that made us click the video. If you make something right at work, why would you change it just because someone got mad for you doing it right? LMAO making videos it's the guy's job and he's basically sharing knowledge for free, if anything the clickbait actually guarantees that more people will recieve the free knowledge.

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

The 80/20 principle, however, generally holds true everywhere, so even if something were possible ten years ago, I can assure you that 80% of people would still be completely unaware of it.

@user-il9qo4qc4n 7 месяцев назад

@@vishalchavda5766 Im talking more about the click bait thumbnail.