The Easiest Website Menu That Will Wow Any User

[@invictuz4803]

I'm not sure what's more impressive, your ability to teach these cool effects or your ability to make world-class videos. Just wow!

[@alimora442]

Facts

[@hatempire]

The storytelling vibes of your videos are being way better to truly learn frontend than some courses. Thank you for the content!!

[@WillFlores1]

This has quickly become my favorite web development channel on KZbin. It's like Fireship but for CSS and UX/UI Design.

[@its_abdu4925]

Man this is the kind of explaining i'm looking for, in depth, you would make a great teacher.

[@ShadowVipers]

You could make it slightly more modular by setting the index as a css variable, then multiplying the index by your modifier, this way you won't be repeating effectively the same complex selector 4 different times per animation effect. Other than that, it looks really awesome!

[@briannoh9235]

If you don't mind, could you code out what you mean by this?

[@UwU-uq9pq]

is it something like - - index ?

[@ShadowVipers]

@@UwU-uq9pq yes I'll post some code tomorrow.

[@briannoh9235]

@@ShadowVipers Would you be able to explain how item.onmouseover works without defining item? Isn't it being used as a parameter? Also how do we access the CSS attribute #menu[data-active-index=#] when the property in our JS is called menu.dataset.activeIndex? Actually don't think I understand this because it's not working in my own code. Kinda new to this, any help/direction would be helpful :D

[@ShadowVipers]

​@@briannoh9235 So to answer the first question (I'll answer the second in the next comment) the I'll take the code from the video and change it a bit, for the JavaScript: const menu = document.getElementById("menu"); Array.from(document.getElementsByClassName("menu-item")) .forEach((item, index) => { item.onmouseover = () => { menu.style.setProperty("--active-index", index) } }); For the CSS we'll do: #menu > #menu-background-pattern { background-position: 0% calc(-25% * (var(--active-index, 0) + 1)); } #menu > #menu-background-image { background-position: center calc(45% + 5% * var(--active-index, 0)); } And then you can clear the other 3 selectors that start with the #menu[data-active-index="{index}"] The "0" which is in "var(--active-index, 0)" is just a default value in case our variable of "--active-index" hasn't been set yet.

[@omersabic8555]

Absolutely amazing, love both the idea and execution. Keep it up!

[@PaulMcCannWebBuilder]

Teaching at this level (without stopping to explain every property and value) is downright powerful. Maybe I'm your target audience (I understood all the code), but I hope anyone viewing this stuff knows that the syntax is not the process. Figure out what you want to do before you learn how to do it.

[@csfromthecouch5538]

You're absolutely amazing, it's been so long since I've seen a channel whose content I've enjoyed watching so much! Cannot wait to see more!

[@enshen2190]

First YT channel that is actually making me interested in coding, keep it up!

[@Anth-ony]

Just wanted to say that I came across your channel through someone on Twitter shouting you out as being very underrated. Boy were they right. Great content and style of videos! Can't wait to see where this channel goes and hope that you become the next big thing!

[@Hyperplexed]

Thanks so much for saying that! Happy to have you along for the ride haha!

[@electrolyteorb]

Love, love love, loved the style, loved the code, loved the approach, loved the pacing..... Loved everything.... Here goes a like and sub😍😍😍

[@reportaccounthcc2463]

The use of divs for every element instead of has triggered me

[@bobevskiboban]

No 20min long videos, simple and just awsome, you are great, just love it

[@alvinjackson6191]

Most compelled I’ve ever been to subscribe ever. Awesome video.

[@beansbeans96]

this is the perfect tutorial ! its 3 am here so ill be saving this for tomorrow ! but really quality content!! i was very surprised by your use of css and the logic you had behind it, really shows theres always more you can learn even in css

[@LW0832]

Great video. Love it But i got a nice clean way to set the elements opacity when hovered. Instant of setting the opacity and overriding it for one element later on, use the not operator to exclude the hovered element. It would look like this: .menu-item:not(:hover) { opacity: 0.3}. This way you use it for all the .menu-item elements except for the hovered one. Have a good one :)

[@thiagoleobons390]

The most amazing this about the DNA Capital website is their background with the DNA helix slowing turning and the glow in just the right places. I am not sure if that is HTML/CSS/JS also or a more complex technology but if with HTML/CSS/JS only that would be incredible

[@Ahmed-sr6gv]

You make everything seems easy and enjoyable to reconstruct!

[@JohnLT999]

Just love your simple explanation!

[@yourix2]

I would have used an unordered inside a tag. It's much more semantic. But great video's! I just subscribed

[@DavidCVdev]

Your content is so good, you deserve more recognition

[@StewartMcGinnis]

earned my sub, you make css feel so elegant

[@sammunro710]

This channel is absolute gold

[@emmanuelfleurine121]

I love your channel. I am pretty sure that in no time I won't be intimidated anymore by any CSS

[@omerbad99]

You sir, just earned yourself a new subscriber.(first video i watched, and boy o boy that was a great one)

[@mikejakusz1493]

Amazing! I love your content and this is why I am subbed!

[@VictorVictory-te2ij]

Stunning! Well done Sir!

[@alimora442]

I will add this on my current project! Most Grateful for sharing your skills!

[@TheScriptingLegend]

0:45 instead of making those separate selections you could use the not operator so for the link opacity thing you’ll just have: .menu-items:hover > .menu-items:not(:hover){ opacity: 0.3; }

[@Flowwid]

can you explain it please? I'm still new hehe

[@todoz11]

@@Flowwid the way it's done in the video, when you hover over one menu item, it lowers the opacity of every single one, and then increases the opacity of the one you hovered over back to 100% but in the way the comment suggests, when you hover over one menu item, it only looks to lower the opacity of every item that ISN'T being hovered over, so the one that you hover over stays fully visible

[@adamstuartclark]

I was going along with this right up until we started with a instead of a more appropriate for properly defining a navigation block. Semantics have a place too.

[@DemonAbigor]

For those that , after js part if it is not working, just move your js file at the end of the body and it will work fine.

[@duruiz]

that's a great tutorial, quick and informative! I would recommend taking more semantic approach to the menu like using nav tags, maybe reduce the amount of divs using pseudo elements and most important take care with the opacity of readable texts because it really prejudice users with vision impairments, so always check your text contrast with wcag contrast checker :)

[@duruiz]

another great approach to better accessibility would be using a preffer reduced motion media query to avoid those cool movements for users who could have some dizziness because of it. 💛

[@sayamqazi]

I have an incurable vision impairment and I agree with you wholeheartedly about text colors. I hate modern design of gray texts. About the animations, they look cool the first couple times. Especially when they are for sliding dialogs, views etc. Power users tend to interact very fast and the animations of new elements appearing and disappearing feel like a bottleneck.

[@bhuvans9042]

Content and the way of teaching is really insane good 🔥

[@mayukhchanda5805]

Your videos are gold mine for developers. Just one ask, can you show how to create responsive web pages while still keep the Immersive feature. I find it easier to reacreate some of these effects easily on bigger screens, but relatively difficult to do the same for Mobile screens. Thanks in advance.

[@netsaosa4973]

Why would you make it look like a free WordPress website

[@sweatyspaghetti500]

A really good menu bar is the breath of the wild website, really wowed me

[@АлексейСычев-ш9у]

Thanks for the tutorial, it's much faster than any other method I came across.

[@Gaiafreak6969]

I love your channel and communication style

[@rne1223]

you are killing it sir. Great content

[@shahbokhari]

Absolutely Amazing Techniques. Thank You

[@joshualipian1187]

Okay because of this video, you got another subscriber thank you for sharing this idea.

[@emrecoklarpersonal]

This is a fantastic tutorial, I love the format. Thank you!

[@kouetew]

Can you you help me with the code? I couldn't reproduce it

[@kumarutsav1123]

Every time I watch a video on this channel, I get Hyperplexed 🤯

[@molyoxide8358]

Got to know the power of 3 mins & this 3 minute video loaded with knowledge made me to subscribe your channel.

[@elcontrastador]

Excellent video! Subscribed!

[@detectivetacco2085]

"it is absolutely easy to recreate" DNA Capital:

[@NikitaDrokin]

This is a very elegant trick. I'm glad you showed us how to make it. It's impressive how creative people can be with their programs if they know how to think properly.

[@justinreynolds6318]

Because you didn't already know this, does that mean that you don't know how to think properly?

[@mahialam9482]

and if you are taught properly too

[@fvbixn]

Would be even greater if you've used semantic HTML, so , , , etc. 😊

[@alfredgithinji3166]

Good Stuff. I am absolutely wowed by the Navbar! I must give it a try. Keep the content coming.

[@denethsathsara4049]

You would make a very good teacher.

[@IsxaaqAcademy]

It's really a real wow! "Humm! for the 1st time I know one place that I can use the Index concept" ~ A JS beginner talkin' to himself

[@cool-aquarian]

This is just good for novelty. Tbh, if I were to face this kind of menu in my day-day work(like reading documentation), I will go mad.

[@NAEL4SLR]

Thanks for the amazing tutorial. More of these videos please!

[@JustinDAMusic]

Amazing! All in under 3mins. Subscribed!

[@Elijah_Lopez]

Probably going to do this for a project I'll be working on in the future with someone. Thanks.

[@Dipenparmar12]

Amazing tutorial, good to have you at this platform.

[@danldg9052]

Swift and elegantly explained. Good job

[@qubism]

Pleasure to watch this. :)

[@BeTheNiche]

This is super late comment, but I saw many people mention the background not moving after the js part. I'm only 3 days into HTML/CSS/ day 0 on JS. This is what fixed it after an hour of playing around with it. It involves putting "background-position 800ms ease;" into the #menu-background-position css section in the transitions area. GL everyone!! #menu-background-pattern { height: 100svh; width: 100vw; background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9% ); background-position: 0% 0%; background-size: 12vmin 12vmin; position: absolute; left: 0px; top: 0px; z-index: 1; transition: opacity 800ms ease, background-size 800ms ease, background-position 800ms ease; }

[@procthegod6557]

you just saved my life

[@Trunkss6]

Subscribed, great video!

[@bastje]

Most of this code is very easy. Only the data-active-index fascinated me, I am gonna try it out, thnx for the idea! :)

[@fastexpand]

I used to have an undying hatred for web programming but now, thanks to your videos, it’s just a dying hatred

[@irun_mon]

It would take me a week to recreate this but you make it looks easy, thx for the tutorial

[@Linuxdirk]

Nowadays it's usual to begin a navigation area with a . The menu looks cool, though.

[@LFMmmelesi]

absolutely what its about, effortless

[@chrismachabee3128]

Pretty good and under 5 minutes. Wow!

[@lilschmea]

I am absolutely going to use this in my personal website

[@SoapinTrucker]

This video so rocks, thank you, AND Shadow Vaper ;)

[@RoleModelFather-bc5eq]

love your content. Take my like!

[@irishRocker1]

Very nice! quite informative and also makes it pretty simple to follow.

[@sohammahure6672]

Absolutely beautiful ❤️.

[@jmoirnz]

beautiful work! I would totally buy a course from you on web design, so if your thinking about it, ill be the first of many customers I'm sure!

[@sumaiyadelwar9388]

It worked. Thanks a lot

[@ninobach7456]

My OCD loves this video ❤

[@JoshIbbotson]

So at the start of this video I paused it and gave it my best attempt and pretty much got there, but I used so many more complex solutions comparatively to achieve the same thing. Sucks but glad I learnt the more optimal way

[@surfboard661]

Thanks bro, keep it up.

[@SushilKumar-ig8ls]

totally... loved it

[@oussamaaftys332]

Thank you for this tutorial.

[@larsdepauw2484]

Excellent and elegant!

[@WehshiHunter]

Thank you are one of a kind. !!!

[@geniusHead]

Universities are afraid of this man

[@loic.bertrand]

That's really inspiring!

[@muskreality]

For sophisticated developers you can utilize Ctrl+C & Ctrl+V command

[@jorgepvenegas]

Welp, I'm subscribed to your channel now :)

[@vidovnjak6100]

Make patreon. You are the reason i started my front end journey... 💪

[@Hyperplexed]

Oh wow, that is so awesome to hear and makes me so happy! I will look into starting one soon! Can I ask what kind of content you might want to see there?

[@vidovnjak6100]

@@Hyperplexed Just some extra content you dont post on YT i dunno but I'm sure lots of people will become a member myself included. Your skill is mind blowing I'm happy i found your channel. :D

[@Hyperplexed]

@@vidovnjak6100 Well I appreciate it a ton and will definitely start thinking about what I want to put on there!

[@davydo7566]

@@Hyperplexed pls can u just hear me out a bit..

[@chicharongbaboy]

Thank You so much I have been trying to crack it since 2 days.. Finally it worked.. thanks

[@tusharkuntawar6170]

Gonna use it now!!!!

[@TheMetalMag]

excellent! thank you

[@TheZerosteel]

uff this would easily take me 4 complete minutes to do, thanks for saving me 1 min and 4 secs. No one ever said. XD Great video

[@itchyJaw]

man you are a beast!

[@oenophile]

Quality video and demo!

[@melodium10]

Hyper : telling us to say feedback me who already typed "Amazing" in the comments just before sending it : I'm 12 universes ahead you!

[@rickironblast]

You did great.

[@d2vin]

Love your videos! Subbed! Think you could recreate some stuff with tailwind?

[@aeroprojects]

Very nice and easy, indeed !

[@SL4UGHT3R]

By watching your vids newbies(me) think CSS is so simple.

[@mattshnoop]

Just a note, you don't need to "convert it to an array so it becomes iterable." The object returned by getElementsBy[whatever] doesn't have a .forEach, but it is iterable. I would use a for-of loop in this case.

[@memelord4639]

he used the index so for of wouldn’t work by itself, what he did was fine to me for his specific use case

[@paradoxify_]

I think if he had used the querySelectorAll to get elements instead of by class name then there'll be no need to convert to Array. You can use forEach to iterate then.

[@ticketisland]

This is brill, and shows you what can be done easily if you know what you're doing. Thank you.

[@nizarbaihaqi2609]

I know i will try this ✨

[@XGamerJan]

Awesome videos!