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

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  2. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  3. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  4. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  5. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  6. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP