CSS-based header/menu for Basic Grid 1.0.
With the creation of my Basic Grid 1.0, I did want to bring in one feature I would religiously use with Bootstrap. Their header setup that turns into a hamburger menu on mobile was quite handy, and I wanted it in my system. Now I know there have been endless debates on the usage of hamburger menus and whether or not they make for good UX, but that’s a deeper discussion for another time, as I don’t see them going away anytime soon.
In keeping with trying to build a jQuery-free system, I wanted this menu as well to somehow work without having to bring in a JavaScript framework. I have nothing against JavaScript or the myriad of frameworks made to build more interesting stuff, but I’m not for adding to the page weight unless it’s truly necessary, and there are ways to build a hamburger menu without JavaScript.
After researching, the ideal solution is a trick many developers use to build toggle switches by styling a checkbox to not appear visually, but instead building the activation button within the label attached to the checkbox. The “on” and “off” functionality is brought by the checkbox with the label being directly affected by the changing states of said checkbox. The menu itself had to be kept separate so it could be utilized in desktop formats while the checkbox/label mechanism is hidden.
One challenge I did encounter though was in animating the opening and closing of the menu. Originally I had tried to make my nav links as blocks with no set height (using padding to space things out). While I could have the menu pop in and out, I could not animate it using transition or animation. Thus I found I had to set up configuration variables with SCSS to determine the number of items in the menu as well as the height.
I created three versions of this header and navigation for my needs. The first is a simple setup that scrolls with content, and the second is a fixed position navigation that stays up top as you scroll. I also made a third version specifically for Amanda Neff’s website, where it stays fixed, but on desktop no logo appears at the top until you begin to scroll down. The links shift to the side and the logo appears, as well as disappearing if you happen to scroll back up.
In keeping with what I feel is a better user experience, I made sure to label the button and have said button change from “Menu” to “Close” depending on the state of the navigation. I feel that while hamburger menus can be overlooked by the user when seeking navigation, it’s better to label the button rather than rely on just three lines.
The only complication I can see with this solution is that you still need Basic Grid in order to use it, mainly for the container class and to do a clear fix on the header when you implement it. I did include those minimums in the files, but I’m eventually going to experiment with Flexbox and CSS Grid to see if I can improve on this and make it more independent.