CSS Only Fab Icon Menu

CSS

CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

CSS Only Fab Icon MenuはCSSによるコンパクトで可愛いメニューを実装できます。メニューボタンをクリックすると円形状にメニュー項目が展開される仕組みです。スマホやタブレットなどのモバイルには最適なメニューですね。

CSS Only Fab Icon Menu

CSS Only Fab Icon Menu

デモでは右下にある「+」というボタンをクリックすると、その周りにメニュー項目が展開されます。アニメーションも上の項目の方から順番に出てくるのでとても素敵ですね。

メニューが開かれている間は「+」が「×」に切り替わります。再度クリックするとメニューが閉じられると同時に「×」が「+」の状態に戻ります。

メニュー自体がとてもコンパクトなのでスペースの有効活用にも繋がりますね。操作もすごくシンプルなので、スマホなどのモバイル端末ではとても使いやすいメニューになるのではないでしょうか?

何よりJSなどを必要とせずCSSだけで手軽に実装できるところが嬉しいポイントです。

というわけで、CSSで実装するコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」の紹介でした。

no-imageフレキシブルで美しいアニメーションによるファイルアップローダー「FilePond」前のページ

インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」次のページno-image

関連記事

  1. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  2. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  3. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  4. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  5. Media Queriesの@media
  6. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP