Do all Hamburger menus need Js?
I’m curious , do all hamburgers need to have JavaScript or is it possible to use only Css + html ? Is it better/ more practical to use Js rather than only Css?
31 Replies
you can do it with just html, using the popover api
MDN Web Docs
popover - HTML: HyperText Markup Language | MDN
The popover global attribute is used to designate an element as a popover element.
^ this is the first example
and it does nearly everything you need, except it looks ugly
with some styles, you can make it look like an hamburger menu
I will read up on it rn , thank youu
you're welcome
this is all new stuff that came out very recently, by the way
the alternative is the checkbox hack, but honestly you need like... 6 lines of javascript to make a hamburger menu
not with the checkbox hack
you can make it fully with css and html
no js
I haven’t started js , so thats why I was asking , I been making stuff with html n css only
the other alternative is ...
<details>
i know it sucks for menus and stuff, but it is something , if you don't care about accessibilityyeah, that was a bit unclear. The checkbox hack uses zero JS, but a "proper" hamburger menu with JS uses maybe 6 lines
yes, that's right
this is a terrible suggestion, because everyone should and honestly must care about accessibility
true, but it's an option, and it can be made accessible with some js "patching"
even the checkbox hack is probably a bit off, but misusing details is definitely a bad idea
i have to agree with you
im sure there's a js way to make it accessible
but the popover api is what matters now
but is it accessible? 🤔
I’m not sure but it looks cool
me neither, but does look easy
You also have to know if you can use a feature that is that fresh off the press
None of the solutions are that greatly accessible without some thought though.
details summary is meh for menu's even though that is what github uses.
they also add quite a bit to make it accessible
The only reason I would even use it, is to have a menu that works without JS but guess what theirs does not so xD
checkbox hack is just that a hack too so I'd avoid it.
popoverAPI will be the savior maybe 🤞
(Maybe)
There is also a solution with the
:target selectoroh, yeah, forgot that
but that changes the history of the page, which can get super irritating
imagine opening the menu twice and trying to do back to google, but you end up showing and hiding the menu
(i know you can do some sort of black magic to make it work with js, without adding to the history, but that is overly complicated)
This made me lol 😆.
WCAG all the way, baby!
I know very little about hemburger menu's. But if I had to make one, I would make the nav twice (mobile and big screen).
Then use a media query to:
-hide the icon
-show the big screen nav
-hide the mobile nav
What am I missing? Aria labels?
No need to make the nav twice.... Learn better CSS
The big issue we are taking about is the open and close if the hamburger.
^ yes, and make it work without js
but mostly opening and closing
Well, I gave it a shot.
But failed 😆.
I thought I could do this with a select element, but they couldn't be properly styled.
So I made the nav appear on hover instead of clicking.
https://jsfiddle.net/L183dbou/3/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
at least add a
:focus-within stateI'm sure everyone else has answered you already, but I do know a hamburger menu can be created just with HTML and CSS. Jen Kramer has a course on Frontend Masters that I know addresses it. Kevin probably has a video on it, too!
Here's a video where community members submitted reponses to challenges. Not sure what all tools they used.
https://www.youtube.com/watch?v=Dr-dVbzZDf0
Kevin Powell
YouTube
You can do that with one line of HTML?!
You guys are amazing! Here are the results of the #hamburger challenge.
homunculus1984 - https://codepen.io/Homunculus84/pen/gOOqmvY
Tim Rinkel - https://codepen.io/t_rinkel/pen/XWWoKWX
Riza Khan - https://codepen.io/riza-khan/pen/mddaVbY
Vipin Mishra - https://codepen.io/vipinmishra/pen/RwwqyVN
Vlassis - https://codepen.io/vskand/pen/ExxGaBJ
J...
Here's another one (not Kevin, though) which shows you how to do it with CSS only
https://www.youtube.com/watch?v=dAIVbLrAb_U
Web Dev Simplified
YouTube
How To Build An Animated Hamburger Menu With Only CSS
Free CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
Hamburger menus are incredibly popular in sites, but building one that is animated, responsive, and uses no JavaScript is quite difficult. In this video I will show you how to build a hamburger menu with only CSS that is fully responsive and animated.
📚 M...
Thank you, I check it out now the designs for the first vid are cool , I haven’t watched the 2nd vid yet but I will today