メニューアイコン実装例　Apple のサイトでは2本線

Input の Checkbox を使用

メニューアイコンをラベルで実装していて、開閉の制御をinput(type=“checkbox”)を使ってHTMLのみで行っています。

<input type="checkbox" id="menustate" />
<nav>
  <label for="menustate">
     ...
  </label>
</nav>

label をクリックすると input#menustate がチェックされた状態になります。

#menustate:checked {
  ~ .nav { ... }
}

input#menustate にチェックが入ると上記CSSの指定により、アイコンはバツ印になるよう指定してあります。

クリック可能エリアの大きさは 48px×48px

メニューアイコン自体の大きさは48px×48pxで、このエリアがクリック・タップ可能です。

その中に30px×30pxの大きさで線のエリアが設定してあります。 このエリアを回転させることによってアイコンの開閉時の動きを制御しています。

線の幅は17px

線自体の長さは17pxです。30pxの中に若干右よりに配置されています。線の長さを奇数にして右にずらすことによってバツ印になったときに上下の線が中央で合わさるように調整しています。

回転させた際に上下の頂点Aが重なり、それぞれ線の中心までの距離が同じになります。

アニメーション

Easing は cubic-bezier で行っています。