Accessible hamburger buttons without JavaScript
1–10 of 154 posts
Re: Accessible hamburger buttons without JavaScript
#2Learn how to create an accessible hamburger button with pure HTML and CSS and why that is important.
Re: Accessible hamburger buttons without JavaScript
#3Learn how to create an accessible hamburger button with pure HTML and CSS and why that is important.
Unrelated: the image on the home page has a low resolution and doesn't look good ...
Re: Accessible hamburger buttons without JavaScript
#4Re: Accessible hamburger buttons without JavaScript
#5Re: Accessible hamburger buttons without JavaScript
#6Neat solution. Also interesting about `:target:`, I had not encountered that before.
Re: Accessible hamburger buttons without JavaScript
#7Earlier quoted context omitted.
Unrelated: the image on the home page has a low resolution and doesn't look good ...
Which image (and which browser)?
The CTA one, looks fuzzy to me (both firefox and chrome) https://i.imgur.com/xVXWiGn.png
Resolution: 2k and 1080p
Re: Accessible hamburger buttons without JavaScript
#8I don't know how I feel about using a CSS hack for this. This isn't a semantic element and a lot of other browsers like TUI browsers aren't sure what to do with this sort of element.
In my experience in many cases, just showing all of the menu items when JS is disabled is an easier, safer solution with cleaner markup and no hacks. After JS is detected, toggle a class on the document to hide the menu, build your button, insert it into the DOM. Some menus are too big, but most are not and the kinds of sites that need big menus often require interactivity with JavaScript anyways.
Re: Accessible hamburger buttons without JavaScript
#9I don't know how I feel about using a CSS hack for this. This isn't a semantic element and a lot of other browsers like TUI browsers aren't sure what to do with this sort of element. In my experience in many cases, just showing all of the menu items when JS is disabled is an easier, safer solution with cleaner markup and no hacks. After JS is detected, toggle a class on the document to hide the menu, build your butto…
That is a terrible user experience for SSR though and will lead to a layout shift every time the page is loaded.
I wouldn’t really call this a CSS “hack” either. There is a checkbox that defines whether the menu is open, and CSS that styles the menu accordingly. I think that this is rather elegant really.
As soon as the :has pseudo class has widespread support, the checkbox can also just live inside the nav element, which removes the awkward general sibling combinator.