CSS Only Fab Icon MenuはCSSによるコンパクトで可愛いメニューを実装できます。メニューボタンをクリックすると円形状にメニュー項目が展開される仕組みです。スマホやタブレットなどのモバイルには最適なメニューですね。
CSS Only Fab Icon Menu
以下のページからCSS Only Fab Icon Menuの実際のデモ動作やコードをチェックできます。
デモでは右下にある「+」というボタンをクリックすると、その周りにメニュー項目が展開されます。アニメーションも上の項目の方から順番に出てくるのでとても素敵ですね。
メニューが開かれている間は「+」が「×」に切り替わります。再度クリックするとメニューが閉じられると同時に「×」が「+」の状態に戻ります。
メニュー自体がとてもコンパクトなのでスペースの有効活用にも繋がりますね。操作もすごくシンプルなので、スマホなどのモバイル端末ではとても使いやすいメニューになるのではないでしょうか？
何よりJSなどを必要とせずCSSだけで手軽に実装できるところが嬉しいポイントです。
というわけで、CSSで実装するコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」の紹介でした。
