What a surprise. With this function, no need to use javascript, everything will become simple. Don't forget to subscribe to the channel to watch more interesting videos about web developers ❣
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
What if we have this component inside a modal and this modal have a width/height limit with overflow:hidden? when the menu is opened the content is cut. How can we handle this scenario? In React/Nextjs we have createPortal and its a valid choice but what if were using just HTML, CSS and JS?
Amazing! I knew about the details tag. But I thought of it as an old and ugly version of an accordion. Never thought of using it this way! Great content. 👍
For the people asking why should we do this without JS if we have JS. It is always best to ship the least amount of JS possible to the client (browser) to enhance speed and performance.
@@balex259 So you dont care about the people with a slower internet connection or weaker systems? And what about people having open tons and tons of applications all unoptimzed? I am running 16GB on my machine at work and having open a dozen different JS Applications together with Docker is fucking up my RAM dude.
As long as browsers implement stuff like that differently and at a different pace, js will always have it's place even for native stuff. I come from the same mindset. Use as litte js as possible. But if one can do this (or anything) now with jQuery and it works on IE6 and Opera Mini. Why would one use a native solution that only works in chrome and Firefox (but looks weird in Firefox) and will be supported by Safari in 2025 and breaks the entire page on the few but existing computers with older OS/browsers.
Great proof-of-concept, I would ensure that AI is making accessible examples. The most basic is ensuring either a screen reader name is used with using icons or at least aria-label.
Thanks for this, I've been doing html since I was in around 90's or early 2000's (cant remember the exact year) and I didnt know or maybe realized about the "details" command
First of all, great video, thanks for sharing! I would like to know how you will approach the menu animation, what if we need to animate the menu on open and close? Also what if we want to close the menu once one of the items inside is clicked or the user clicks outside of the menu not on the toggle button.
Should have animated display on open and close. Also popover api is better for the last reason you mentioned in that it does the auto positioning for you based on available space. Might even be able to combine with these elements since popover is just an attribute
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
Same, and then a few days later found out that it looked horrible on Safari because that browser doesn't allow you to style the ::marker (at least a year ago it didn't) so in the end went with list-style: none as they have here.
MasyaAllah, this video tutorial is great. It's all what I'm looking for. All videos in this channel is awesome. I like your voice too, even it's like mrbeast level 2,but it's ok. This voice help me to understand.
But ig its not possible to transition the details as u can see when u click on account icon there is a sudden opening of the list that we gave to details now how can we transition it 😕
What a surprise. With this function, no need to use javascript, everything will become simple. Don't forget to subscribe to the channel to watch more interesting videos about web developers ❣
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
What if we have this component inside a modal and this modal have a width/height limit with overflow:hidden?
when the menu is opened the content is cut.
How can we handle this scenario?
In React/Nextjs we have createPortal and its a valid choice but what if were using just HTML, CSS and JS?
Thanks for shouting the instructions at me. It was helpful in that it overpowered the unnecessarily loud keyboard sound. Top notch ❤
😂❤
This is brilliant. Both the project and how you presented it. Great job!
Glad to Know it ! Thanks ! I'm gonna put it in use right now!
Amazing! I knew about the details tag. But I thought of it as an old and ugly version of an accordion. Never thought of using it this way! Great content. 👍
Thank you so much 😍 Yes, There are many people who know about this html tag but can't think of how to use it 😍
For the people asking why should we do this without JS if we have JS. It is always best to ship the least amount of JS possible to the client (browser) to enhance speed and performance.
Yeah, few lines of js will slow a website… we are in 2024, you can build fast and more responsible with js…
@@balex259 So you dont care about the people with a slower internet connection or weaker systems? And what about people having open tons and tons of applications all unoptimzed? I am running 16GB on my machine at work and having open a dozen different JS Applications together with Docker is fucking up my RAM dude.
Or if you use blazor, like me, it is awesome
As long as browsers implement stuff like that differently and at a different pace, js will always have it's place even for native stuff.
I come from the same mindset. Use as litte js as possible. But if one can do this (or anything) now with jQuery and it works on IE6 and Opera Mini. Why would one use a native solution that only works in chrome and Firefox (but looks weird in Firefox) and will be supported by Safari in 2025 and breaks the entire page on the few but existing computers with older OS/browsers.
This guy is not from planet earth, You are so great, Your presentation is Top-notch.
Thanks for shouting the instructions at me. It was helpful in that it overpowered the unnecessarily loud keyboard sound. Top-notch❤❤
great tutorial please continue we'll support your with positive comments
Thank you brother 😍😍
@@lundeveloper you are most welcome my smart and creative friend
Great proof-of-concept, I would ensure that AI is making accessible examples. The most basic is ensuring either a screen reader name is used with using icons or at least aria-label.
There's more to life than Chrome!
@5:22 : for webkit browser use : summary::-webkit-details-marker { display: none }
my react project doesn't need too much on off state, thanks for this content
Thanks for this, I've been doing html since I was in around 90's or early 2000's (cant remember the exact year) and I didnt know or maybe realized about the "details" command
TIL html commands = tags
You are amazing. Thanks for the tip
There's no need to change voice ai. it's perfect 👌
Ow i never knew about it, thank you lundev, we want more cool topics 🥰
Finally, there's someone who can who can actually teach us the art of css and js of real life scenarios.... ❤❤❤❤❤
Thanks, I will do more ❤
@@lundeveloper love you man. 😍 Just keep it up 💪💯
Love that voice, keep doing the great work
Excellent job!!!
Effortlessly explained but yet so good. This channel is going to blow up very soon!
As a css beginner doesn't know a letter in js all i see is a masterpiece of art🏆
I am glad I saw this because I never knew that about the details and it works like a ui with no display-style nice
ohhh goood idea thanks bro
Pretty clever, great presentation as well
Amazing ? Nah.
Popover API and anchor positionning are amazing ! ❤
great content for the 4th time
AMAZING. Thancks you for this content
This is Awesome Bro Thank You
First of all, great video, thanks for sharing! I would like to know how you will approach the menu animation, what if we need to animate the menu on open and close? Also what if we want to close the menu once one of the items inside is clicked or the user clicks outside of the menu not on the toggle button.
Thanx man you are legend ❤
Did you ElevenLabs Mr Beast as your narrator? haha good stuff
Expecting more of these no js tricks!! ❤❤❤❤❤
Amazing video. Bring more of this🙌
Thank you 😍
lemme go try yr videos to start from the basics.
Lmao you must be using MrBeast AI voiceover
This is the good approach but it fails when we want to close the dropdown on outside click.
Should have animated display on open and close. Also popover api is better for the last reason you mentioned in that it does the auto positioning for you based on available space. Might even be able to combine with these elements since popover is just an attribute
amazing!!
SOO COOL!!! Question: is there an easy way to hide the buttons/items in the list when someone clicks anywhere else on the page?
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
Thank you for your sharing. I wonder how to manage the menu position from bottom to top with cards which at the bottom of the screen?
That's brilliant ❤❤..
How would you go about Animations for opening/closing?
Thank you so much 🎉❤
Great !!
Thank you so much 😍
Jaw dropper video!
Is it possible to close an open collapsible when click on a different one just using css?
Sir please suggest best tutorials to learn advance css it will be very much helpful for us
you should do a vs studio setup/settings video
what about outside click ? Does it close when we click outside of the dropdown
You rock!
you can just set box2 to whatever it is not on click, no need for the if statement
I remember I once used it for an FAQ section
Same, and then a few days later found out that it looked horrible on Safari because that browser doesn't allow you to style the ::marker (at least a year ago it didn't) so in the end went with list-style: none as they have here.
MasyaAllah, this video tutorial is great. It's all what I'm looking for. All videos in this channel is awesome. I like your voice too, even it's like mrbeast level 2,but it's ok. This voice help me to understand.
Bro please how long did it take you to master all this?
thank you 🥰
it is very usfull feature 😀
Great !
Where can we find the source code ?
Is it possible to make the content pop up animated ? Like a smooth height from 0 to 100% ?
But it seems it wouldn't collapse if you click anywhere outside.
Basic to advanced JavaScript course with project please
what vscode theme do you use?
I didn't know Mr beast is making tutorial videos now
But ig its not possible to transition the details as u can see when u click on account icon there is a sudden opening of the list that we gave to details now how can we transition it 😕
he is legend
Thanks
😍😍
Bro 🎉❤ plz shear your theme with us
wow，I like
Thank you ☺️
What if screen shows 2 items in each row
You are awesome mahn😮
❤
😍
Also whoch vscode theme is this?
it was created by me,
You will find video tutorials on my channel
🎉
the cool
that crazy
Yes Very Crazy ^^
please change this voice it's so uncomfortable
And it's funny 😅
It's tts I guess!!
Its mr beast , you don't like mr beast?
@@snoopdogg9490 Don't act stupid it's not mr beast it's a damn AI.
@@r_lonef nah man , i am sure its mr beast i always knew he was a front end dev
The voice drops suddenly. Aww it's uncomfortable
wow !!! Great job sir. Please dont stop recorging your videos ;).
Thank you brother 😍
Контент хороший, но как же бесит эта синтетическая озвучка, прям🤮 Смотреть невозможно!
Mr beast voice clone is so annoying.
Yikes that voice. Please lower or remove the keyboard sounds as well
This is not collapsible.
This is either popover menu or context action menu.
Collapsible -- is an accordion 🪗
Bro why don't you uploaded it 3 days before I wasted my 40 mins for writing js😂
😅😅😅😅😅 I will try more