What is the best practice for creating hamburger menus? JavaScript/CSS or CSS only? Should you have any fallback for no-js when you make JS hamburgers?
Best practice -- IMAO (in my arrogant opinion) -- is to build it to work without JavaScript first, then to enhance it further with JavaScript to improve the user experience. Right now I favor the :target approach of treating it as a modal dialog for a number of reasons. 1) non-CSS users the menu -- or any other modal dialogs -- are just normal subsections of the page linked to via a hash link. Boom, accessibility without jumping through hoops. 2) It is functional scripting off when CSS is present. 3) You can still have all the bells and whistles scripting offers. The things to have the scripting add: 1) trap the closing href="#" links so they do a window.history.back() until the hash is empty or "#" when appropriate. 2) have the [esc] key close the menu / modal 3) disable keyboard navigation (via tabindex="-1") on all focusable elements outside the menu/modal when the hash is selected, and re-enable them when it isn't. It all plays to the ideals of progressive enhancement. Make the menu like you would as if CSS and JavaScript don't exist. Go as far as you can with your screen media CSS. Then layer on further functionality with JS. That way if any one part of the process is missing, the user can still accomplish the task they came to the page to do. That's called graceful degradation. Because scripting off/disabled, CSS off/disabled, and even much of HTML's functionality all need to be treated as important aspects of REAL design. In fact such concepts count amongst the many things that make most of the clowns running around calling themselves "web designers" unqualified to design a blasted thing.