Show Active Nav Link with JavaScript

Подписаться 47 тыс.

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

50% 1

In this video, I'll show you how to show which page is the active webpage to set it apart visually.
🔗 Key Links 🔗
- CodePen: codepen.io/Cod...
- MDN docs on aria-current: developer.mozi...
---------------------------------------
📹 Related Videos 📹
- Responsive Navbar: • Responsive Navbar HTML...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned

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

8 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Marty72 2 года назад

Just a heads up, the text-decoration shorthand notation doesn't work in Safari.

@CodinginPublic 2 года назад

I didn’t realize that. Thanks so much!

@DragonRoyZ Год назад

Of all the Tutorials, this is the most straight forward and short solution. Thanks a lot!

@CodinginPublic Год назад

So glad it was a help!

@johnmarkbondad6009 Год назад

I never thought this would be done in a simpler way. thanks

@CodinginPublic Год назад

You’re welcome!

@Fatima-ie5kj 2 года назад

I always make a custom class active and switching between this class manually between page's but not anymore after watching this.🥰 Thank you

@CodinginPublic 2 года назад

Same! I've always done that until I just found this a few weeks back!

@AlThePal78 Год назад

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

@CodinginPublic Год назад

Glad it was a help!

@MarshallSC1 2 года назад

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.

@CodinginPublic 2 года назад

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

@neontuts5637 2 года назад

Thanks for sharing this amazing way to add the current page indicator. It's easy to implement and adds accessibility.

@CodinginPublic 2 года назад

Glad it was a help! Just found about about the aria-current attribute myself and stopped using "active" classes everywhere :)

@neontuts5637 2 года назад

@@CodinginPublic Awesome! Thanks again 🙏

@anonymouseverx 2 года назад

Extremely helpful with new solutions like always. Thank you so much, Chris.

@CodinginPublic 2 года назад

So glad you enjoyed it!

@adnanamin3666 2 года назад

Very clear explanation in a short amount of time! Clever! Thanks a lot.

@CodinginPublic 2 года назад

You’re welcome! Glad it was a help!

@ClarkeDesign 2 года назад

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.

@CodinginPublic 2 года назад

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!

@humbulanimunyai6320 2 года назад

As always, clear step by step explanation, anyway i enjoyed that part of window object

@CodinginPublic 2 года назад

🙏

@lukecartwright613 2 года назад

This is awesome! It's both accessible AND cool. Thank you

@CodinginPublic 2 года назад

You’re welcome! Glad you enjoyed it!

@devlife5596 2 года назад

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!

@CodinginPublic 2 года назад

Glad you’re enjoying the channel! And I appreciate your opinion on the font.

@astroboy3720 2 года назад

I needed this so much, thank you for this clear vid.

@CodinginPublic 2 года назад

Sure thing! Glad it was a help. Thanks for saying something!

@eatatjoe69 Год назад

this was pretty good. Informative and i think I learned JS

@CodinginPublic Год назад

Great!

@charanathenuka3423 Год назад

excellent work! thank you very much❤

@CodinginPublic Год назад

You’re welcome! So glad it was a help!

@kevonevans3107 Год назад

Thanks for this works perfectly

@CodinginPublic Год назад

You’re welcome!

@absobel Год назад

Very helpful, thanks

@CodinginPublic Год назад

Glad you found it helpful!

@lhc2721 Год назад

thanks, this was to the point and nicely explained. :)

@CodinginPublic Год назад

Glad it was helpful!

@hamzanouh9153 Год назад

Great and easy way

@CodinginPublic Год назад

Thank you so much 😊

@c4346 2 года назад

Very clever, thanks for the tip!

@CodinginPublic 2 года назад

Sure thing!

@amjadnikzad4890 2 года назад

thank you it was informative!

@CodinginPublic 2 года назад

Great! Thanks for saying something!

@twinconceptsdesign 2 года назад

Really great 👍 👌

@pc8406 Год назад

thank you😊

@CodinginPublic Год назад

You're welcome 😊

@blackpurple9163 Год назад

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

@CodinginPublic Год назад

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

@blackpurple9163 Год назад

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

@samnorte1891 10 месяцев назад

Fantastic! Thanks for the tutorial, but it looks like this is not working for dropdown menu, isn't it?

@CodinginPublic 10 месяцев назад

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?

@tulioferreira8766 Год назад

ajudou muito, thank you parça

@CodinginPublic Год назад

You’re welcome!

@VectorBiH Год назад

thank you

@CodinginPublic Год назад

You’re welcome!

@axvgarcia Год назад

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?

@CodinginPublic Год назад

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?

@Strawberry00562 Год назад

thanks bro

@CodinginPublic Год назад

You're welcome!

@lvekua 2 года назад

Love it! ❤

@CodinginPublic 2 года назад

Thanks for saying something!

@lvekua 2 года назад

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

@tomasslezak3628 2 года назад

Nice trick

@luckyrao6271 Год назад

how to use same navbar in all webpages of the website and also this trick to show active nav link

@CodinginPublic Год назад

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!

@icwhy4366 Год назад

i'm pretty sure you can use sections to do this

@icwhy4366 Год назад

its possible using java jquery I just tested it.

@figureof8795 2 года назад

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?

@CodinginPublic 2 года назад

Yeah, PHP would be different. Sorry I can't help with PHP.

@figureof8795 2 года назад

@@CodinginPublic no problem. Thanks for the response.