How does the input checkbox work if it's hidden?
Here you can see from https://youtu.be/1TZjgQ0Osic 6:30, he creates that hamburger button, he hides the input, and then he uses css selectors to "use" that hidden input element in order to toggle the sidebar, how does that work?
WebKitCoding
YouTube
Sidebar Navigation Menu With Animated Toggle Bar Using HTML And CSS...
In this video, I will create a Sidebar navigation/navbar bar with Animated Hamburger Toggle Menu just Using HTML And CSS, which you can see as animated like hamburger menu bar when you click on button/bar icon and after click icon will changed from menu bar to cross or cancel bar and you will also see in this tutorial that how i created a menu t...
6 Replies
honestly, there are better ways to do this, but this works on a pinch
the idea is simple: use a label with the
for
attribute to toggle a checkbox
just because it's hidden, doesn't mean it won't be toggled
and then, you use the :checked
pseudo-class to style the element right after
you can see it at ~10:12
but in this case, it's a menu that slides from the left to the rightHow does it get clicked i don't understand, it's not there, and we are actually clicking another div with .toggle class
and that input above gets activated?
you see the label, at 6:39?
that label will check/uncheck the input
it doesn't need to be visible to be checked
it just must exist in the document
The two ways to use
<label>
.
Label is an inline element so only put other inline elements (not block level elements) inside. Do not put a label inside a label. The video incorrectly puts a <div>
(a block-level element) inside the label--this is not semantic HTML according to the spec.
Note that depending on the one you choose, your styling options may differ, as firefox still does not support :has()
.
Another issue in the video is using display: none
on the input. This is an accessibility concern and may cause problems for users who rely on screen readers. The proper way to "hide" things with CSS while maintaining accessibility features is with the following class.
This will ensure that the element is not visible, but still present and usable for people using assistive technologies. Keep in mind you have to add styling for focus and hover states to another element as a result (i.e. the corresponding <label>
).
@HarunAbsoloutely amazing explanation
thank you guys very much
a much better way to hide it is to do not hide it at all
you can use clip-path to make the checkmark
or, in this case, the hamburger menu icon
if you use the 2nd approach, you can make it work even in browsers without :has support