Build Navbar Menus That Actually Work for Everyone

Рет қаралды 19,590

Күн бұрын

Пікірлер: 43

@carlosheredia27 24 күн бұрын

Nah this video was insane, I was expecting a simple navbar tutorial and I got a full accessibility masterclass. Great video.

@antonio.carreira 11 күн бұрын

Great video!! Would love to see how you handle sub-menus, and how to expand them to the left or to the right, depending on the available screen space. I have implemented it already, but after seeing this video I'm sure I'm doing something wrong! :)

@dennishemstra 28 күн бұрын

Thanks so much! I implemented this in a project and realized that additionally you have to add a check on init for mobile devices. Using the current code it only adds the inert attribute when the screen size changes to mobile. Not when the page is loaded on a device with a small screen size

@PicSta Ай бұрын

Thank you so much for this in depth tutorial. Also, the accessibility part was crucial to me. I think it's more important than ever.😊 Please more on accessibility. 👍

@coding2go Ай бұрын

Great to hear!

@thecoolestdog1923 Ай бұрын

oh I use Miro every day, perfect collab!

@mohammedwaheeb9325 27 күн бұрын

This guy is the best ! I learn new things every time i watch him i am gonna bookmark this video and get back to it when i need probably gonna "borrow" the code as well ❤😂

@AbdulRahman-yp6oy Ай бұрын

Excellent , easy to explain

@yuriyzadorozhnyi3849 Ай бұрын

Привіт з України ! Дякую Вам за корисну інформацію, Thank you! You explanation was easy to understand and everything you mentioned was valuable!

@natawebmaster 24 күн бұрын

Привіт) і я з України) Вивчаю веб девелопмент

@mmftw 25 күн бұрын

Spectacular guide!

@itshxbert1606 Ай бұрын

going to use that method on my site

@verawat Ай бұрын

Awesome. Good job

@jareckikk Ай бұрын

This video is must see! You did fantastic job explaining this topic. Thank You very much!

@coding2go Ай бұрын

Glad it was helpful!

@Abdullah_CodeOfficial Ай бұрын

Can we use visibility: none; instead of inert?

@rubberbandpromax 23 күн бұрын

It will cause animation to not happen

@Vicaire.des.ombres 10 күн бұрын

you're the best 💗

@RoldanMengote Ай бұрын

Thanks for this video.

@SuperGylden Ай бұрын

Aria-controls should only be used when the "controlled part" is not directly after the interactive part in the DOM. Support is not very good btw. Remember to use :focus-visible or just :focus if you prefer. Not quite ready for production yet is the newish popover with built in accessibility. It is supported by all newer browsers. And last (and least), Safari strips all semantics of lists, when list-style: none is applied. You can put them back by giving . It's a feature not a bug in Safari. Don't ask why

@ademineshat Ай бұрын

Great video. It will be nice to make a responsive admin dashboard template with the mobile navbar used in this video, but on Desktop it should be on the left and also be possible to collapse it just to see the icons. You did a video like that, but on mobile the menu was at the bottom. I could do it, but it could be fun to make a video for that 👍

@imvivekkushwaha 27 күн бұрын

Can you make video on cross browser compatibility of Css

@PicSta Ай бұрын

I have encountered an issue, I think we are missing something in the logic here. Hopefully it's just me who made a typo somewhere, but please let me know how and if I am correct. On desktop size, if you have anchor links, instead of links to separate pages, you can only click 1 link, then the inert kicks in and makes it unable to navigate any further. Surely, one-page websites come more out of modernity, but some projects still require it. Any tips?

@MatjazC 4 күн бұрын

Yes, I also stumbled upon this unfortunate navigation breaking issue... Is there a solution @Coding2GO?

@Skalebro Ай бұрын

I use 2 buttons (open/close) and 2 media queries (show on phone, hide on phone). And the Dialog tag, which has a menu and open properties inside it (on one of the buttons I use inlineJs id_dialog.showModal() and that’s it! Although I liked your method too

@Skalebro Ай бұрын

UDP: And you must have hidden span on your description buttons. Because a voice assistant or robot will pronounce this post as a “button” instead of “open/close menu button”

@pksingh5347 Ай бұрын

Nice

@stratfanstl Ай бұрын

This was very helpful. Regarding the visual glitch with spacing at 4:33... I find that HTML and CSS can literally do just about anything but becuase the element names in HTML and the syntax of CSS seem focused on BREVITY rather than CLARITY, accomplishing anything with these technologies relies more on repetition of work and rote memorization of what should be used for particular needs than the code itself being self-documenting and self-training. Is there any reference to recommend that -- for lack of a better phrase -- explains the philosophy of HTML and CSS in their current evolved form? Something that lends itself to acting as a flowchart for diagnosing code producing unexpected results and avoiding patterns that lead to those episodes of lost productivity chasing wierd spacing gaps?

@PaulMcCannWebBuilder Ай бұрын

Working with CSS sometimes requires Sherlockian detective skills. Inspection skills down to the sub-pixel level plus knowledge of how elements' dimensions and spacing are calculated. Wish there was a flowchart, but for spacing issues, look at box-sizing, then inline element sizing issues, then margin collapsing, then esoteric, non-obvious issues like this one - vertical-align defaults on inline elements inside list items are calculated differently, which is why the is slightly smaller than its parent li. It's off by ~ 1px. This is actually a common spacing issue, but not normally noticed, unless the border/background combination you see here is applied. I may have built lots of nav bars before a border on the parent made this space issue noticeable, but then experience (or using the same code again) solves it when seeing it again. As for the solution, giving inline 's a display: block (or flex here) usually solves space issues (seen often on inline img elements), but not here. You could display: flex the parent, as in the video, but understand what flex does to fix this - in this case it forces the to have a height of 100%, so putting a height: 100% on the would fix it too. But as for your question, you can see from how long it took to explain this, there's no easy way to diagnose, without lots of little pieces of knowledge. One new thing that helps is Gemini AI inside Chrome's dev tool elements/style panel. Ask it natural language questions about why things are happening while hovering on the element causing it, and it does a decent job of letting you know what's going on. (A little icon will appear to the right of the hovered element, in the elements panel). Wish I had it for the last 2 decades I've been struggling with CSS.

@stratfanstl Ай бұрын

@PaulMcCannWebBuilder Very helpful. One technique I have adopted is configuring every unique style I define using unique, obnoxious background and border colors so renderings more clearly indicate how all elements are fitting and which one is responsible for the alignment being seen. Only after the code yields the desired spatial result are the colors reverted to whatever color pallette is desired. In general, though, you are right. A lot of time is spent in the developer pane, drilling thru elements and their inheritance tree.

@prabusiliwangioke Ай бұрын

what font do you use on vscode ?

@VermiNew8475 Ай бұрын

Looks like "Consolas"

@NamVu-im2xm 12 күн бұрын

So much thing to do at the "inert" part. If you just toggle display none and block, things would have been way easier, but again, you can not do the transition, or can you? You can actually do it with "transition-behavior: allow-discrete" and "@starting-style", on the lastest google chrome version. I hope every browser up to date with those new css features asap.

@Michaelninder Ай бұрын

Nice!

@Mizaeducation Ай бұрын

Maker a video if i have call to action button on the right and make it also with the nav 0:06

@mzhomie8880 Ай бұрын

Accessibility for people with visual impairments is becoming increasingly important. The days when it was all about looking good are over. The web should exclude as few people as possible.

@smarteveryday1606 Ай бұрын

man, i was customizing your previous html/css navbar fusion with dark mode project for my own website learning. right then you dropped it. coding is very frustrating task, both gemini and openai is drunk.