Creating a Drawer with HTML & CSS Only - NO JavaScript!
HTML-код
- Опубликовано: 15 фев 2022
- Drawer and / or modals are common elements on many website or mobile apps. Whilst typically created with JavaScript, there is an alternative though...
Code on Code Sandbox: codesandbox.io/s/polished-moo...
Join our Academind Community on Discord: academind.com/community
Check out all our other courses: academind.com/courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
How to make the drawer close by clicking outside the drawer along with or without the close anchor hyperlink reference using html and css only?
Great video! CSS and HTML are getting skipped over by many that go right to Javascript and and frameworks leading to massive accounts of extra code and libraries in their projects just for some basic css styling it's 🤪
Good Manuel. Love from India🇮🇳
After a long time thank you for this video
Unless Im an idiot this has 2 big issues
First : you can t remove the drawer without clicking close or making the background link to #
Second: you can t make multiple drawers
although this should work really great on a mobile i think
if im wrong please correct me i d love to learn
edit : I just had a theory what if u put the id on the parent element instead of body so this way you can make multiple drawers in a single page
cool, I will use it to replace check-box & label
Great video but what if the url has some hash value using for some other elements just link any other anchor tag or say jumpto
How do we close the model by click outside of it ?
Why can't you put the id on the card? What if you had more than 1 drawer on a page for instance
What a great JS-free solution!
WOW, suuuper nice!
What about a simple "Checkbox-hack"? It would make it more robust.
Lets hope none of these hacks ever make it to production ;p
❤️
What would be the advantage or disadvantage of doing this without JavaScript?
It's generally better to do what you can with CSS and HTML before you jump to JavaScript because it's easier to maintain. Adding scripts adds coplexity and if you don't need to, it's better to avoid adding complexity.
@@TomDoesTech That's a lot more complex than doing by JS. Although I think the biggest advantage is to get rid of JS. Many people use extensions like NoScript to prevent abuse from companies (like steal information, intrusive ads, etc).
This won't work if the modal will be called from a scrolled state.
@@TomDoesTech what is hard to maintain about:
onclick="document.body.classList.toggle('drawer--open')" ?
@@kennethjoris2212 Nothing. I'd love to see that app that has that single snippet of JS in it.
i am waiting for video that contain stream authatication like netflix
Good video but your hand gestures are kind of random
Sorry, I usually love the stuff on your channel but this feels super hacky. 1) adding random ids to the body tag 2) unable to have more than one modal per page 3) unable to close by clicking outside of the menu
As others have said, this can be achieved in a single line of JS, which I think is a fair trade-off
This has to be the strangest way of adding a modal to a page. The ID should be on the modal and the display of the 'drawer' should be controlled with CSS. There is no need to add the ID to the body tag, this means you cannot have more that one modal on the page. You have take a simple task and turned in to something that it's not. THUMBS DOWN for poor advice!
Serious question: are you German?
Accent is so typical for Germans trying to speak English.