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. CSS

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

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

  2. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

  3. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  4. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  5. Epic Spinners

    CSS

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

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

  6. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

最近の記事

  1. あらびきソーセージパイ
  2. REACH フロス
  3. MacBook AirとApple Watch
  4. エアリズムコットンタンクトップ
PAGE TOP