There’s so much HTML and CSS can do on their own for presentation. Take for instance, the mobile nav icon and slide-out navigation. The “Hamburger” nav design pattern.
There is a lot of writing on the usability side of things. For development, though, we see things happening the same way over and over again.
Free ebook - Common CSS Grid Patterns
CSS Grid is a revolution in web layout. With this ebook, I cover 3 design patterns that Grid solves easier, better and more creatively to help push our designs in better directions.Download Now!
The original “stated” element
As it turns out, we have states in HTML that are accessible by CSS.
<input type="checkbox"> has a checked and unchecked state. This functionality has been in the browser since HTML 2.
We need to structure our HTML to make the best use of out CSS.
First, it’s imporant for our label to have a “for” attribute. This will allow it to function in place of the checkbox itself later. Also notice in this example, our
<ul> for our navigation is a sibling to our #nav-toggle checkbox. We’re going to use this relationship to select it in CSS.
Reading the State in CSS
Now that we’ve got a stated element on the page, we need to read that in CSS.
Here’s the simplest CSS example to use the state:
We start with our initial state. In the case of a mobile nav it shouldn’t be shown. So .nav-list is display: none. When we select .nav-list, we want to couple it to its stateful element. In this case, we’ll use the CSS sibling selector ~.
To check the state of #nav-toggle, we’ll use the :checked pseudo class.
Now, we have state built into our CSS for our navigation. All we have left is to style elements to look like we expect a mobile navigation to look.
This is where the “for” attribute on the label comes in handy. I’ve never seen a mobile navigation button with a checkbox. So first, we’ll hide the checkbox and do our main styling on the label. This work is usually done on an anchor tag.
This is where preference you can deviate. Make it the mobile nav style you like best. You will need to change the
<label>’s display property from “inline” to “block.” Past that, I put my money on the word “Menu” and not a hamburger Icon, with a simple border style.
While a show/hide navigation would work, “off-canvas” navigation is still in vogue. So, we’ll take our actual navigation and move it to the right out of the visible viewport.
I’m not great with animation, but I know animation is key to a good user interface. Instead of having the off-canvas nav magically show up on page, we’ll have it slide in.
To do this, we’ll use CSS transform’s translateX function and a nice bouncy transition. For consistency, you’ll want to use the same movement and transition on the label AND .nav-list.