The Easiest Website Menu That Will Wow Any User 

Facts

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

is it something like - - index ?

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

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

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

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

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

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

and if you are taught properly too

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

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.