+ +
+diff --git a/site/posts/2019-11-11-js-free-hamburger-menu.md b/site/posts/2019-11-11-js-free-hamburger-menu.md new file mode 100644 index 0000000..b224e8e --- /dev/null +++ b/site/posts/2019-11-11-js-free-hamburger-menu.md @@ -0,0 +1,239 @@ +``` +metadata.title = "Building a JavaScript-Free Slide-Over Menu" +metadata.category = "web" +metadata.date = "2019-11-11 21:08:42 -0400" +metadata.shortDesc = "Building a slide-over hamburger menu without using JavaScript." +metadata.slug = "js-free-hamburger-menu" +``` + +Slide-over menus on the web are a pretty common design pattern, especially on mobile. Unfortunately, they seem to generally be accompanied by massive, bloated web apps pulling in megabytes of JavaScript for the simplest of functionality. But fear not, even if you're building a JavaScript-free web app, or simply prefer to fail gracefully in the event the user has disabled JavaScript, it's still possible to use this technique by (ab)using HTML form and label elements. + + + +Now, I could just spew a bunch of code onto the page and give you cursory explanation of what it's doing, but that would be boring, so instead I'm going to walk through the progression of how I built it and the reasons for the changes I made along the way. If that's all you want, you can take a look at the final version and View Source to see all the code. + +We'll start off with a tiny bit of markup in the body (I'm assuming you can set up an HTML page yourself): + +```html +
++ +
+