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

no-imageシンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」前のページ

シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」次のページno-image

関連記事

  1. Sticky Multi Header Scroll
  2. Typewriter JS

    JavaScript

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

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

  3. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  4. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  5. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  6. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP