And, you just elevated what already was a high quality content of tutorials. Aria labels are important but often neglected. P.S. Video description is from one of the previous videos.
Literally made my life easier I am trying to do my own stuff because bs got confusing after a while when I was using it so I want to do my own thing now thanks for the insperation
Nice tutorial. For tutorials though, can you use a more easy to read font (for class and href for example) for some of your elements in the code. Just makes it easier to digest.
Thanks for the suggestion. I just need to set up a different workspace for recording videos. I don't want to make things harder on people to watch, but I also don't want to have to switch up multiple settings every time I go to record. I'll work on it. Thanks for the suggestion!
Great explanation, btw any way to animate that wavy underline so it looks like it's moving? With css only if possible otherwise any other way? I'm using react+tailwind so I don't want to depend on any other libraries or frameworks if possible
Glad you enjoyed it! There's not an easy way to do it with the underline property, but you could do something like this with an ::after pseudo-element? You'd likely have to create a custom keyframe animation, but it's possible. Not easy to explain in a comment though :)
@@CodinginPublic I understand, I thought of doing that with an svg in the after pseudo-class but since I'm very new to svg, I don't know how to make it 'wavey' so it doesn't look like 2 images changing from one to the other
Well, because the aria attribute says something about the actual page you’re on, you’d always want it to reflect the actual page. If you’re just going for a visual styling for the parent of the sub page, you could add some regex or something to check the current url against your parent pages and add a class of “active” or something to those parents?
For some reason my console is not showing the links. Ive correctly linked my external JS file but the following code does'nt seem to work: document.querySelectorAll('.nav-link').forEach (link => { console.log(link); }) EDIT: does the file have to be html or can it be php?
You need to use some kind of framework that allows you to build components (Astro, Hugo, etc.) and then use that component on each page. Hope that helps!
I need to sign in for comment. Firstly, Thanks for your TUT. Second. Can you please DO NOT change VS Font Style. Its very hard to read. Its extremely waste time visitors time for reading your code. Any way, I still like this videos. Thanks for your time!
Just a heads up, the text-decoration shorthand notation doesn't work in Safari.
I didn’t realize that. Thanks so much!
Of all the Tutorials, this is the most straight forward and short solution. Thanks a lot!
So glad it was a help!
I never thought this would be done in a simpler way. thanks
You’re welcome!
And, you just elevated what already was a high quality content of tutorials.
Aria labels are important but often neglected.
P.S. Video description is from one of the previous videos.
Yes, been trying to learn aria labels myself and hoping passing on that knowledge is a help!
(Thanks for the heads up on the video description! 😬)
Very clear explanation in a short amount of time! Clever! Thanks a lot.
You’re welcome! Glad it was a help!
Literally made my life easier I am trying to do my own stuff because bs got confusing after a while when I was using it so I want to do my own thing now thanks for the insperation
Glad it was a help!
Thanks for sharing this amazing way to add the current page indicator. It's easy to implement and adds accessibility.
Glad it was a help! Just found about about the aria-current attribute myself and stopped using "active" classes everywhere :)
@@CodinginPublic Awesome! Thanks again 🙏
Extremely helpful with new solutions like always. Thank you so much, Chris.
So glad you enjoyed it!
As always, clear step by step explanation, anyway i enjoyed that part of window object
🙏
I always make a custom class active and switching between this class manually between page's but not anymore after watching this.🥰 Thank you
Same! I've always done that until I just found this a few weeks back!
This is awesome! It's both accessible AND cool. Thank you
You’re welcome! Glad you enjoyed it!
I needed this so much, thank you for this clear vid.
Sure thing! Glad it was a help. Thanks for saying something!
Nice tutorial. For tutorials though, can you use a more easy to read font (for class and href for example) for some of your elements in the code. Just makes it easier to digest.
Thanks for the suggestion. I just need to set up a different workspace for recording videos. I don't want to make things harder on people to watch, but I also don't want to have to switch up multiple settings every time I go to record. I'll work on it. Thanks for the suggestion!
Great explanation, btw any way to animate that wavy underline so it looks like it's moving?
With css only if possible otherwise any other way?
I'm using react+tailwind so I don't want to depend on any other libraries or frameworks if possible
Glad you enjoyed it! There's not an easy way to do it with the underline property, but you could do something like this with an ::after pseudo-element? You'd likely have to create a custom keyframe animation, but it's possible. Not easy to explain in a comment though :)
@@CodinginPublic I understand, I thought of doing that with an svg in the after pseudo-class but since I'm very new to svg, I don't know how to make it 'wavey' so it doesn't look like 2 images changing from one to the other
thanks, this was to the point and nicely explained. :)
Glad it was helpful!
thanks for the video! one question, how can I keep the aria-current attribute in a navigation link after selecting a child page of that link?
Well, because the aria attribute says something about the actual page you’re on, you’d always want it to reflect the actual page. If you’re just going for a visual styling for the parent of the sub page, you could add some regex or something to check the current url against your parent pages and add a class of “active” or something to those parents?
Fantastic! Thanks for the tutorial, but it looks like this is not working for dropdown menu, isn't it?
Hmm. I don’t remember? Been too long since I built this…it should work the same though unless I overwrote the styles somehow here?
What software did u use for your coding?
VSCode :)
For some reason my console is not showing the links. Ive correctly linked my external JS file but the following code does'nt seem to work:
document.querySelectorAll('.nav-link').forEach
(link => {
console.log(link);
})
EDIT:
does the file have to be html or can it be php?
Yeah, PHP would be different. Sorry I can't help with PHP.
@@CodinginPublic no problem. Thanks for the response.
excellent work! thank you very much❤
You’re welcome! So glad it was a help!
Very clever, thanks for the tip!
Sure thing!
how to use same navbar in all webpages of the website and also this trick to show active nav link
You need to use some kind of framework that allows you to build components (Astro, Hugo, etc.) and then use that component on each page. Hope that helps!
i'm pretty sure you can use sections to do this
its possible using java jquery I just tested it.
Thanks for this works perfectly
You’re welcome!
Very helpful, thanks
Glad you found it helpful!
thank you it was informative!
Great! Thanks for saying something!
Really great 👍 👌
Love it! ❤
Thanks for saying something!
@@CodinginPublic actually I wanted to ask you if this method could work with navigation that links to other sections with ids on the same page.
I need to sign in for comment.
Firstly, Thanks for your TUT.
Second. Can you please DO NOT change VS Font Style. Its very hard to read. Its extremely waste time visitors time for reading your code.
Any way, I still like this videos. Thanks for your time!
Glad you’re enjoying the channel! And I appreciate your opinion on the font.
how to do this with scroll snap?
Here’s a video I did on scroll snap. Hopefully this helps? Add Scroll Snap with CSS
ruclips.net/video/VuLzNdaPBkQ/видео.html
how to use this in a react website?
If you use React Router, the NavLink component sets this by default. So you can just style it with CSS.
Great and easy way
Thank you so much 😊
ajudou muito, thank you parça
You’re welcome!
thank you😊
You're welcome 😊
Nice trick
thanks bro
You're welcome!
thank you
You’re welcome!
good video but I am stuck at document undefined :(
Did you link to your JavaScript document in your HTML page?
@@CodinginPublic ya, i put my nav in the layout might be the issue?
There are a few ways to this this, but move it to the bottom of your document just before the closing body tag and see if that helps :)
You may need to "link.removeAttribute('aria-current')" before
Perhaps on a SPA? But if you’re changing routes, any of those manually-added attributes will clear.