"I would like to buy a .ham .burger"

Squeeze page to less than 600px to see the hamburger

What is a Hamburger?

"The hamburger button is a symbol consisting of three parallel horizontal lines (displayed as ≡) that is used as a button in graphical user interfaces." (wikipedia).

What is a .ham .burger?

It is the stupid.css implementation of the logic behind it

How to use it

This is a padded black header

<header class="padded black">
  ...
</header>
              

This is a container in a padded black header, with content vertical aligned in the middle

<header class="padded black">
  <div class="container middle">
    ...
  </div>
</header>
          

This adds a div filling the container

<header class="padded black">
  <div class="container middle">
    <div class="fill middle">
      ...
    </div>
  </div>
</header>
          

This is a menu in the container

<header class="padded black">
  <div class="container middle">
    <div class="fill middle">
      <ul class="menu">
       <li><a href="#">Menu Item 1</a></li>
       <li><a href="#">Menu Item 2</a></li>
       <li><a href="#">Menu Item 3</a></li>
      </ul>
    </div>
  </div>
</header>
          

Now the menu is inside an accordion and the value of the checkbox is the status of the accordion. The label for must be the id if the checkbox in the accordion, so clicking on the label toggles the accordion. The checkbox is hidden.

<header class="padded black">
  <div class="container middle">
    <div class="fill middle">
      <label class="fa fa-bars" for="left-menu"></label>
      <div class="accordion">
        <input type="checkbox" id="left-menu">
        <ul class="menu">
          ...
        </ul>
      </div>
    </div>
  </div>
</header>
          

Classes .fa .fa-bars use Font Awesome to display an icon with 3 bars.

.ham on the label and .burger on the accordion turn the accordion into a special one that is open or closed depending on the window width.

<header class="padded black">
  <div class="container middle">
    <div class="fill middle">
      <label class="ham fa fa-bars" for="left-menu"></label>
      <div class="burger accordion">
        <input type="checkbox" id="left-menu">
        <ul class="menu">
          ...
        </ul>
      </div>
    </div>
  </div>
</header>