ax5ui-menu

JavaScript

カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニューを実装できます。jQuery、ax5core、Bootstrapが使用されているとのこと。テーマもいくつか用意されていて、どれもシンプルなデザインで飽きがなく、いろんなサイトに合わせやすそうですね。

ax5ui-menu

デモ

デモでは「Right click on the mouse.」と書かれた領域内で右クリックをすると、ax5ui-menuによって作られたコンテキストメニューが表示されます。Menu AとMenu Bというメニューリストが表示され、さらに両方とも子メニューを持っています。入れ子になっていて、各メニューにマウスオーバーすると下の階層のメニューが表示される仕組みです。

こちらはContext Menuのデモですが、他にもチェックボックスが付いたものやアイコンが付いたもの、テーマを変更できるものなどいろんなパターンのデモが用意されています。

ちなみにThemeのデモでは、default、Primary、info、warning、dangerの中から好きなテーマを選択して見ることが可能です。

実装面ではitemsの中にメニューを入れていきます。表示させるメニュー名はlabelに指定し、子リストを設定したい場合はitems内にさらにitemsを入れていくかたちです。

実際のコードの記述例はデモページに載っているので、詳しく知りたい人はぜひチェックしてみてください。

ax5ui-menu

関連記事

  1. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. GoogleSheets-HTMLImporter
  4. RELLAX

    JavaScript

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

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

  5. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  6. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP