jQuery UI の Menu によるアイコン付き多階層メニュー

jQuery UI の Menu Widget による多階層メニューの各メニューにアイコンを加える方法。

実装例（サンプル）

• メニュー１
• メニュー２
  • メニュー２－１
    • メニュー２－１－１
    • メニュー２－１－２
    • メニュー２－１－３
  • メニュー２－２
  • メニュー２－３
• メニュー３
• メニュー４
  • メニュー４－１
  • メニュー４－２
  • メニュー４－３
• メニュー５

実装例（サンプル）の動作について

「>」のある「メニュー２」と「メニュー４」にカーソルを合わせると、それぞれの第二階層のメニューが現れる。

「>」のある第二階層の「メニュー２－１」にカーソルを合わせると、第三階層のメニューが現れる。

メニューがフォーカス状態の場合、キーボードの矢印キーなどで操作することもできる。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

JavaScript

CSS

HTML

アイコンを加えたいメニューに<span class="ui-icon アイコンの種類"></span>を加える。

アイコンの種類については、jQuery UI の Button プラグインで作るアイコンボタン一覧のページへ。