漢数字の「三」のような三本線で構成されるアイコンをその見た目から「ハンバーガーアイコン」と呼ばれ、主にメニュー表示用に使われています。このアイコンをクリックすると、いろいろな形式でメニューを表示しますが、ほとんどの場合、このメニューを閉じるアイコンやボタンも表示されます。そこで、「ハンバーガーアイコン」をクリックすると、アニメーションして閉じるアイコンに変るという仕組みが数多く発表されています。これはその仕組みのひとつです。

サンプルエリアの左上にある「ハンバーガーアイコン」をクリックすると、シンプルなメニューを表示します。「ハンバーガーアイコン」から変わった閉じるアイコン「×」をクリックすると、メニューが閉じ、アイコンがハンバーガーに戻ります。

サンプル

---

---

htmlソース（ハンバーガーアイコンとメニュー）

<div class="entire-menu">
  <input type="checkbox" id="change-hamburguer" />
  <a class="hamburguer" href="#">
    <span></span>
    <label for="change-hamburguer"></label>
  </a>
  <div class="menu">
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
  </div>
</div>