jQueryのUIの例 - メニュー（メニュー）

マウスとキーボードとの相互作用は、メニューテーマをナビゲートするために使用することができます。

メニューコンポーネントの詳細については、APIドキュメントを参照してくださいメニューのコンポーネント（ウィジェットメニューを）。

デフォルトの機能

デフォルトの設定では、ネストされたメニュー項目やメニューを無効にします。これは、変換して、コメントを追加テーマのリストで構成されており、マウスやキーボード操作をサポートしています。メニューをナビゲートするためにカーソルキーを使用してみてください。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのメニュー（メニュー） - デフォルトの機能</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#menu」）.menu（）;
  }）;
  </スクリプト>
  <スタイル>
  .ui-メニュー{幅：150ピクセル;}
  </スタイル>
</ HEAD>
<ボディ>
 
<ULのID = "メニュー">
  <李クラス= "UI-状態-無効"> <a href="#">アバディーンする</a>ます。</ li>
  <李> <a href="#">エイダする</a>ます。</ li>
  <李> <a href="#">アダムスビル</a>にます。</ li>
  <李> <a href="#"> Addystonする</a>ます。</ li>
  <李>
    <a href="#">デルファイします</a>
    <UL>
      <李クラス= "UI-状態-無効"> <a href="#">エイダする</a>ます。</ li>
      <李> <a href="#">ザールラントする</a>ます。</ li>
      <李> <a href="#">ザルツブルクする</a>ます。</ li>
    </ UL>
  </李>
  <李> <a href="#">ザールラントする</a>ます。</ li>
  <李>
    <a href="#">ザルツブルクします</a>
    <UL>
      <李>
        <a href="#">デルファイします</a>
        <UL>
          <李> <a href="#">エイダする</a>ます。</ li>
          <李> <a href="#">ザールラントする</a>ます。</ li>
          <李> <a href="#">ザルツブルクする</a>ます。</ li>
        </ UL>
      </李>
      <李>
        <a href="#">デルファイします</a>
        <UL>
          <李> <a href="#">エイダする</a>ます。</ li>
          <李> <a href="#">ザールラントする</a>ます。</ li>
          <李> <a href="#">ザルツブルクする</a>ます。</ li>
        </ UL>
      </李>
      <李> <a href="#">パーチする</a>ます。</ li>
    </ UL>
  </李>
  <李クラス= "UI-状態-無効"> <a href="#"> Amesvilleする</a>ます。</ li>
</ UL>
 
 
</ BODY>
</ HTML>

アイコン

アイコンでメニューを使用する方法を示し、デフォルトの設定でメニュー。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのメニュー（メニュー） - アイコン</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#menu」）.menu（）;
  }）;
  </スクリプト>
  <スタイル>
  .ui-メニュー{幅：150ピクセル;}
  </スタイル>
</ HEAD>
<ボディ>
 
<ULのID = "メニュー">
  <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコンディスク"> </ span>に保存する</a>ます。</ li>
  <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコン-zoomin"> </ span>を大きくする</a>ます。</ li>
  <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコン-zoomout"> </ span>をリファインする</a>ます。</ li>
  <李クラス= "UI-状態-無効"> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコンプリント"> </ span>の印刷... </a>の</李>
  <李>
    <a </a>を果たしhref="#">
    <UL>
      <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコンシークスタート"> </ SPAN> </a>の</ LI>に
      <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコンストップ"> </ span>をストップする</a>ます。</ li>
      <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコンプレイ"> </ span>をする</a>ます。</ li>再生
      <李> <a href="#"> <スパンクラス= "UI-アイコンUI-アイコンシークエンド"> </ span>を次する</a>ます。</ li>
    </ UL>
  </李>
</ UL>
 
 
</ BODY>
</ HTML>

前：jQueryのUIの例-ダイアログ（対話）

次へ：jQueryのUIの例-プログレスバー（プログレスバー）

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル

jQuery UI 例

jQueryのUIの例 - メニュー（メニュー）

デフォルトの機能

アイコン