CSS-only Drop-Down
Hamburger Menu

Version 1.0 by Alex Moschopoulos

Download (ZIP) | Fork on Github

Introduction

With the creation of Basic Grid 1.0, I wanted to remove much of the features and items I never used that one normally gets with Bootstrap. However, there was one feature I used religiously and wanted in my Basic Grid — the header that collapses into a hamburger menu when you go to mobile.

Now I know hamburger menus have been a source of contention and debate in the UX community, but they are here to stay. It’s really up to the UX Designer to do everything in his/her power to make sure the end user isn’t confused on where to go. I do have plans to create a version of this menu that collapses to a smaller menu on the bottom...for those not into the hamburger.

Before you use this...

In order to use this header and menu you will either need my Basic Grid 1.0 framework to aid in placement, or the container.css included with the download. I also use Normalize and Eric Meyer’s reset for improved cross-browser rendering. I did include a minified version of the two with the download, or you can use your own.

Setup and Configuration

The download contains a nested CSS file for those who don’t want to mess with SCSS (although you should learn it...it’s so worth it).

For those using SCSS, you will need to open the _config.scss and set up these two configuration variables:

// Number of menu items you want
$number-menu-items: 5;

// Individual height of menu items
$menu-item-height: 2em;

These two configuration items are important because it’s needed to mathematically determine the height of the drop-down menu when one is in mobile. In order to semantically keep the menu an unordered list, but have the animation of the menu sliding down, a height was needed.

If you are more akin to using the straight CSS, then you’ll need to set the height of the drop-down menu on line 74 of the CSS code:

header .headerRight input[type="checkbox"]:checked ~ nav {
height: 10em;
}

Your final number should be the number of items in your menu multiplied by the height of each item item as you see fit.

You’ll also need to decide if you want the menu to be fixed at the top or scroll with content. Just a true or false on this configuration variable:

// Should this menu be fixed at the top?
// Place "true" in the variable if you want to,
// or "false" if you do not.
$menuFixed: false;

The fonts and colors are up to you, but you can also change the labels that go on the menu button itself. Just be aware that you might have to tweak the placement in the CSS depending on what you enter.

// Labels for the button that go under the hamburger.
// Bear in mind you might have to play with the
// placement depending on what you put.
$menuTerm: "Menu";
$closeTerm: "Close";

Now let’s look at some examples.

Example 1: Standard Menu

The original header and menu that will scroll with content.

See the Pen CSS-only Drop-Down Hamburger Menu by Alex Moschopoulos (@amportfolio) on CodePen.

Example 2: Sticky Header Menu

The same header and menu only fixed to the top so it does not scroll with the content.

See the Pen CSS-only Drop-Down Hamburger Menu with Sticky Header by Alex Moschopoulos (@amportfolio) on CodePen.

Example 3: Amanda Neff’s Menu

More an honorable mention, this is the menu I made for Amanda Neff’s website, based on this menu. It’s designed to have the top logo out of the viewport, but it slides in when you scroll down. Not totally CSS (some JavaScript for the scrolling animation triggers), but it made a good impact.

You’ll need to look at this menu on full desktop width to see it in action.

See the Pen Header for Amanda Neff by Alex Moschopoulos (@amportfolio) on CodePen.

Questions? Comments? Suggestions?

Please feel free to reach out!