分123今回のお題は,ハンバーガーメニューのアニメーションだ。ハンバーガーアイコンをクリックすると,メニューが右に向けて広がる(サンプル1⁠)⁠。Menu」のデザインとアニメーションをもとに,コードは絞り込んでわかりやすく組み立て直した。技術的にむずかしいところは少なく,ただメニューの数だけ細かい設定が増える。SVGを用いたフィルタは,今回のお題からは外した。menuアイコンWebフォントを使うサンプル1のハンバーガーメニューには,文字は使われていない。替わりにアイコンがある。Awesomeを用いた。つぎのようなアイコンがWebフォントとして読み込んで表示できる。Awesomeは,つぎのコードのとおりBootstrapCDNから読み込んだ。CSS」のフィールドの右ボタンを展開すると,「⁠HTML」のコードが示されるので,それをコピー&ペーストすればよい(図1⁠)⁠。integrityも含んだ<link>要素が加えられる。いつものように<script>要素に-prefix-freeを読み込んで,ベンダープレフィックスは省いた(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。Icons」参照⁠)⁠。HTMLドキュメントにおけるハンバーガーメニューをつくるための<body>要素の記述は以下のコード1のとおりだ。メニューの開け閉じは<input>要素のチェックボックス(type属性"checkbox")で行う。要素そのものはCSSで隠す。そのため,ハンバーガーボタンの<label>要素にfor属性で,チェックボックスのid属性("menu-open")を指定した。したがって,<label>属性のクリックでチェックボックスは切り替えられる。</a></nav>ハンバーガーメニューを開いたときの静的スタイルハンバーガーメニューを開いたときの静的なスタイルは,以下のコード2のCSSで定めた(図2⁠)⁠。メニュー(class属性"menu-item")とハンバーガー(class属性"menu-open-button")のボタンは,border-radiusプロパティで円形にして,それぞれ前掲コード1のとおりアイコンと3本線(<span>要素)を加えている。開いたメニューの水平位置は,transformプロパティにtranslateX()関数で決めた。メニューを閉じたとき各項目が後ろに隠れるよう,ハンバーガーボタンのz-indexプロパティを高めてある。