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 + +
+

+ +

+
+``` + +We'll also have some basic CSS to start, so looking at our page isn't looking quite so painful. + +```css +body { + font-family: sans-serif; +} + +main { + position: relative; + max-width: 980px; + margin: 0 auto; +} +``` + +Then, we'll need the element this whole thing hinges on: a checkbox input. Because of the CSS trick we're using to implement the visibility toggling, the checkbox element needs to be at the same level in the DOM as our `#sidebar-container` element. We're going to use the adjacent sibling selector (`+`), which means that the checkbox input needs to come directly before the sidebar container, but you could also use the general sibling selector (`~`) which would let you put the checkbox anywhere in the DOM given it has the same parent element as the sidebar container. + +```html + +