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. 背景画像のロゴをRetinaに対応させるCSS

    CSS

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

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

  2. CSS

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

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

  3. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  4. Media Queriesの@media
  5. CSS

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

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

  6. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP