no-image

JavaScript

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

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

expanding action button

expanding action button

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

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

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

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

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

no-imageレスポンシブでスタイリッシュな「lightbox-jquery-plugin」前のページ

豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」次のページno-image

関連記事

  1. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  2. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  3. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

  4. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  5. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  6. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP