ここではハンバーガーの動きに注目するのではなく、ハンバーガーを押した時に

現れるナビメニューのデザインに注目します。そのため、ハンバーガー自体の動きは統一

されています。実際にはハンバーガーの動きとナビメニューを組み合わせて実装します。

全画面表示

See the Pen hambarger_gnav by kzk (@yrnosajx-the-bold) on CodePen.

全画面表示２

See the Pen hambarger_nav by kzk (@yrnosajx-the-bold) on CodePen.

左から半分表示

See the Pen hambarger_left_half by kzk (@yrnosajx-the-bold) on CodePen.

上から下に全画面

See the Pen hambarger_toptobtm by kzk (@yrnosajx-the-bold) on CodePen.