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」の紹介でした。

関連記事

  1. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  2. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  3. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  4. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  5. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  6. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP