Chris Coyier dubbed this technique “ the checkbox hack.” Several developers have used this “hack” for their off-canvas menus, like in Paul Lewis’s tutorial for Chrome Dev Summit or Luis Manuel’s morphing hamburger menu. ![]() Radios and checkboxes work amazingly well for most widgets, like tabs, modals, dropdowns and accordions. When making widgets interactive with CSS, you have a couple options: Note: I’m using Font Awesome for the icons in my example.įigure 2: Resulting display of the HTML & CSS after step 3. Let’s do this! Step 1: HTMLĪs you may know, the first step is always writing a solid, well-thought-out, base-layer of HTML. Then have JavaScript do its magic on a more appropriate layer - improving the already existing UI. So, we’re going to do as much as we can with HTML and CSS. Progressive Enhancements is just good engineering.It’s never a good idea to ignore potential users.“Because there is some chance JavaScript won’t run, we must always account for that chance.”.It is just about embracing the right technologies on the right layer. Progressive Enhancements is not anti-JavaScript.Core tasks should be done on the most stable layer ( i.e.“Core tasks can always be achieved without JavaScript.”.But for the sake of brevity, I’ll try to sum it up: But first… What’s wrong with JavaScript?Īaron Gustafson explains the importance of Progressive Enhancements and JavaScript’s role in web development better than I ever could. With that, we’re going to build a simple, responsive off-canvas hamburger menu using only CSS that will be easy to incorporate into your own project. You have plenty of company, as it seems much of the web hasn’t actually caught on yet. ![]() I’ve improved upon Chris’s example, and would love your feedback. If this is an old trick for you, then hang with me for a bit.After all, Chris Coyier wrote about this technique back in November of 2012. Pure CSS off-canvas hamburger menus aren’t a recent discovery. Building a progressively enhanced mobile menu that works without JavaScript
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |