Menu

On small screens, the tabs fold down into an expandable menu. To trigger the menu, I use a checkbox (note that it appears at the top of the screen on smaller screen sizes). There are two labels that trigger this checkbox. One opens and the other closes the menu. The one that opens is absolutely positioned invisibly over the "active" menu item. The closing label is at the bottom of the open menu.

The best way I have found to show and hide content without using absolute positioning is to use a combination of max-height and opacity. When "inactive", the content has a max-height: 0 and opacity: 0.

It also has a transition: opacity when I don't know the future height (this panel's content for example) and transition: opacity, max-height when I do know the future height (like the menu). When "active", the max-height and opacity get positive values and the content will transition in. I'm sure flexbox could get me around this hack, but this works for now.