The Easiest Website Menu That Will Wow Any User
HTML-код
- Опубликовано: 30 сен 2024
- Watch as I show you how to make a website header that WOWS using HTML, CSS, And JavaScript. And the best part is, it'll only take 2.5 minutes!
Support the channel: ko-fi.com/hype... (accepts PayPal, card, etc).
CodePen: cdpn.io/bGvejNY
DNA Capital: dnacapital.com
Music Credits:
Track: Daydream - Land of Fire [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Daydream - Land of Fir...
Free Download / Stream: alplus.io/dayd...
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!
Facts
Why would you make it look like a free WordPress website
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!
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.
The use of divs for every element instead of has triggered me
Absolutely amazing, love both the idea and execution. Keep it up!
This has quickly become my favorite web development channel on RUclips. It's like Fireship but for CSS and UX/UI Design.
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.
The storytelling vibes of your videos are being way better to truly learn frontend than some courses. Thank you for the content!!
Man this is the kind of explaining i'm looking for, in depth, you would make a great teacher.
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 :)
Cool concept but design-wise it's a bit invasive tbh. Less is more works better here IMO (eg. minimal / no background, more emphasis on typography, relative content to the navigational items, etc.) The background image and dotted pattern just looks a bit corny and distracting in all honesty.
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.
It seems like my data-active-index is not updating on mouse hover i even tried copying your code from codepen could anyone please help me
I have the same difficulty rn
I had the issue aswell.. for me it got fixed after i realized that my JS was imported in the
U need to import it at the end of tho...
So right before add your to import the JS... (TBF I tried to built htis on a preset html file i wrote some time ago so that's why my script was outside the body)
I would have used an unordered inside a tag. It's much more semantic. But great video's! I just subscribed
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
Love, love love, loved the style, loved the code, loved the approach, loved the pacing..... Loved everything.... Here goes a like and sub😍😍😍
This is really bad design, for on one hand, less is more, and on the other, the human visual system has a tendency to focus on whatever moves contrary to what stands still, for obvious evolutionary reasons, but what you do with this design is to have people focus on the background and not on the menu. Just don't do it.
What is the point of the hover animation though? The burger menu should only display on small screens, phones, tablets, which have touch screen, hover only works with cursors. Am I missing some usecase?
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;
}
can you explain it please? I'm still new hehe
@@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
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.
Don't forget to use semantic HTML tags
Anyone else having an issue getting this to work it seems like a really cool design but the js is not working for me.
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 :)
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.
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;
}
you just saved my life
"it is absolutely easy to recreate"
DNA Capital:
hello i get the activeIndex as should but it seems the activeIndex has no influence when i try to use it in css.
CSS: .menu[data-active-index="0"] > .menu-background-pattern {
background-position: 0% -25%;
}
console.log(menu):
why wouldnt it run? is it incompatible with react?
I'm not entirely sure, if that solves the problem, but shouldn't it be: "#menu[...]" and "#menu-backg..." instead of ".menu" and ".menu-backgr..."?
@@bradrimer hello and thank you, i have tried that and it did not work in react. i even pasted the original code from Hyperplexed's Codepen inside a React app create with npx, but it wouldnt work either
This is what I did with Flash 25 years ago 😜
First YT channel that is actually making me interested in coding, keep it up!
I like it but why not use ":not" ?
Would be even greater if you've used semantic HTML, so , , , etc. 😊
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.
For sophisticated developers you can utilize Ctrl+C & Ctrl+V command
each time i hover over an item, the background pattern moves maybe a millimeter. i have his code copied entirely, but it seems to not be working. any suggestions?
same here.. i have no idea what went wrong
@@alexkim104 i figured it out btw, i had the background pattern tied to ‘background-position’ instead of ‘transform: translate(x% y%)’
Absolutely Amazing Techniques. Thank You
Cool and all, but from my personal user perspective i cant stand minimalistic and overly fancy websites. Not sure what it is, but i find it more annoying and distracting when im genuinely looking for a business or service and browsing through their websites. Just keep it simple and convey your businesses intent without putting on a dramatic display of creativity I have no interest in.
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!
Thanks so much for saying that! Happy to have you along for the ride haha!
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!
Hyper : telling us to say feedback
me who already typed "Amazing" in the comments just before sending it : I'm 12 universes ahead you!
Markup-wise, you could’ve used nav and ul elements
I don't understand how to link this to my HTML? I've tried to follow along but when it comes to applying the stylesheet to the actual html menu, doing the typical href file linking process doesn't work? What the heck am I supposed to do??
yeah this code straight up like doesnt work so....yah
edit: he makes a mistake in the video
on #menu-background-pattern in css add "background-position: 800ms ease"
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.
he used the index so for of wouldn’t work by itself, what he did was fine to me for his specific use case
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.
Can you make the menu item text a little bit bigger? I can't read it
Most of this code is very easy. Only the data-active-index fascinated me, I am gonna try it out, thnx for the idea! :)
How did you make thr background move just by moving the cursor ?
It "wows" me, how you get a completely useless website out of this, with the least effective resources, in a totally useless manner, without reusability. Like a car, built of McDonalds fries - and only of this specific ones - which can't transport anything but itself, not even a driver.
Nice video but I question IDs in CSS. My build/watch commands fail when an ID is detected in CSS as they never should be there.
You make everything seems easy and enjoyable to reconstruct!
Why force so much croaky intonation and nasalisation? I’m a firm believer that you are alienating so many potential viewers as the LA valley girl voice is very grinding/off putting of the otherwise spectacular content.
This video so rocks, thank you, AND Shadow Vaper ;)
Welp, I'm subscribed to your channel now :)
Nice CSS. You should use nav and li for a11y tho.
Are you "m8micking" fireship?? Dude that is not ok 😕
Every time I watch a video on this channel, I get Hyperplexed 🤯
I don't get it, yes it looks amazing, but almost everyone and their mothers use mobile phone, you should focus more on how this interact with phone browsers more.
Do rgba(2255, ...) and rgba(255, ...) make no different?
I used to have an undying hatred for web programming but now, thanks to your videos, it’s just a dying hatred
Ngl I wanna learn css/html now lol. I’ve tried before and I just hate it 😂
the code you wrote at 1:55 doesn't work for me
can someone help me and explain why the background doesn't move?
seems to not work in react app. sad
It's HTML, CSS and JS. It will work in a React app (because React, is JavaScript itself), the only conclusion here is there's a mistake on your part somewhere.
what is data-active-index and menu.dataset.activeIndex are they inbuild in javascript
bad explanation, I am new, I do not know where should I applied the css configuration you didnt even mention that, is it in the head or in the body?
This content was o-kay. Idk why but i didn't like this one as much of the rest of your work here in this channel
I was wondering can these things be done with unocss or tailwind or css is just a raw language that can be played with instead of dealing with classes from other libraries
yoooo
Would that work for mobiles?
except for the javascript which can be better everything else looks nice
Just love your simple explanation!
Very nice, but why not use a nav element with an ul inside containing the menu items (anchor tag)
The parallax fad can't go away soon enough. 🤮
I like it just clean tbh, this is already too much for me
Like seriously I need a CSS teacher like you or do you have any course
How do I link the js to the html file
Can you convert this to COBOL for me?
pretty cool. however you should use the native HTML element for menu and not div :)
Im gonna implement this on the site im currently building
Excellent video! Subscribed!
Pretty cool, but what about the responsive
LOL! Dude I was all the time scalling fonts like this:
.title {font-size: 24px}
@media (max-width:1400px){
.title{ font-size: calc(12px + 2vw)}
}
Then I had to check if the font size match the switch size in range of 1400px nad 1401px
And you just showed me that I can use clamp instead of calc and use @media size screens😮💨, I didn't know about clamp LOL.
Pleasure to watch this. :)
Heard "as per usual" and had to click off.
Me who doesn't know how to center a div: 👁👄👁
I didn't like your font choice btw
That should be a nav with a ul and a bunch of li's, not divs
Huver? I think you meant hover.
Underrated!
how would this respond in moblie? if possible
love your content. Take my like!
You would make a very good teacher.
idk why but I had to tweak a few things to make it work
this is great
too bad html is not a coding language
Why not use instead of div?
You and Fireship should collab
I'm brand new to coding and ui ux design but I have some experience in graphic design and I was wondering what software you use so I can start learning to code
Web design is normally CSS, HTML and Javascript
There are alot of code editors you can use like sublime text, vs code, atom, vim (if you are a maniac), etc. But have you already started a local dev environment? Without it you can't start web development
I would just use VS Code
Thanks bro, keep it up.
excellent! thank you
Problem with that background-image doesn't scale well on all device sizes or screen size
Instead I put background-size:cover; scale: 1.1
then on hover scale: 1;
Now it scales well but the issue is that is doesn't move on some screen sizes, but atleast it's not repeating background.
2 minutes and 56 seconds is not 2.5 minutes
Made this thing some 8 years ago.
that's actually 2.9 minutes