no-image

JavaScript

円形に広がるメニュー実装「expanding action button」

expanding action buttonは円形に広がるメニューを実装できるのが特徴です。メニューリストを表示させたい時だけボタンをクリックすればいいので、画面領域の狭いスマホなどのモバイルには最適なナビゲーションメニューといえます。

expanding action button

expanding action button

デモではスマホのようなスクリーンが表示されていて、その中の右下にある「+」ボタンをクリックするとメニューが円形に広がって表示されます。メニュー項目はテキストではなくアイコンになっているので、直感的に選択できると思います。

アニメーションも滑らかで操作性もシンプルなのが使いやすいですね。

メニューが展開されると「+」ボタンの部分が「×」に変わります。再度ここをクリックするとメニューが閉じられて元の状態に戻ります。

スマホなどといった画面のスペースをできる限り有効活用したい人には最適なメニューになりそうですね。

というわけで、円形に広がるシンプルな操作性を備えたメニューを実装できる「expanding action button」の紹介でした。

関連記事

  1. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  2. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  3. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  4. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  5. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP