解 説

スマホサイトのナビゲーションの例は新しい記事を書きましたのでそちらも参考にしてください。(2015/10/23)

ハンバーガーボタンをクリックするとナビゲーションがアコーディオン状で展開されます。
jQueryを使用していますが、簡単な内容ですから自由にカスタマイズできます。
ヘッダーの高さは奇跡の44pxとして使いやすい高さに設定しました。
サンプルは360pxより幅が小さい場合にスマホ用のナビゲーションに切り替えます。画面を徐々に小さくしても反応しません。
実際のスマホなどで確認するか,画面を360px以下にしてリロードするなどして確認してください。
スマホサイト用のナビゲーションのサンプル
HTMLコードの例

CSSの例

jQueryの例

ちなみに、ハンバーガーボタンの3本線をテキストで表示するには、「ごうどう」で変換すると出てきます。ユークリッド幾何学で使われる記号です。