Accessible hamburger buttons without JavaScript

Re:Accessible hamburger buttons without JavaScript by enyo on Friday January 27, 2023 @08:48AM (#34545944)

Learn how to create an accessible hamburger button with pure HTML and CSS and why that is important.

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by techn00 on Friday January 27, 2023 @08:54AM (#34546011)

Unrelated: the image on the home page has a low resolution and doesn't look good ...

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by enyo on Friday January 27, 2023 @08:57AM (#34546047)

Which image (and which browser)?

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by techn00 on Friday January 27, 2023 @09:05AM (#34546127)

The CTA one, looks fuzzy to me (both firefox and chrome) https://i.imgur.com/xVXWiGn.png Resolution: 2k and 1080p

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by enyo on Friday January 27, 2023 @09:22AM (#34546315)

Thanks for letting me know! Seems to happen because it’s not a high dpi screen. I’ll get on it.

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by _n0ll on Friday January 27, 2023 @09:02AM (#34546091)

Second one(the guy on his pc), vanadium

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by swyx on Friday January 27, 2023 @10:37AM (#34547188)

providing complete copy pastable code with good default styling would help improve the article

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by LocalPCGuy on Friday January 27, 2023 @11:09AM (#34547593)

Not really super important, but thoughts on using an SVG when the same hamburger button affect can be generated with just a tiny bit of HTML/CSS? As little as one element with :before/:after for the top/bottom bars, although sometimes it needs a wrapping element for best styling.

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by toastal on Friday January 27, 2023 @02:14PM (#34550379)

BTW, it's been ::before/::after (pseudo-element, not pseudo-class) since IE9 (2011).

[ Parent | on HN ]

Re:Accessible hamburger buttons without JavaScript by LocalPCGuy on Monday February 06, 2023 @11:24AM (#34679723)

Oh sure, I am aware, just mis-typed it in the comment.

[ Parent | on HN ]