メニュー的なものを作るときに使えそうなものをピックアップ

参考：http://jqueryui.com/

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#menu" ).menu({
      items: "> :not(.ui-widget-header)"
    });
  });
  </script>
  <style>
  .ui-menu { width: 200px; }
  .ui-widget-header { padding: 0.2em; }
  </style>
</head>
<body>

<ul id="menu">
  <li class="ui-widget-header">CHAR</li>
  <li>char A</li>
  <li>char B
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </li>
  <li>char C</li> 
  <li class="ui-widget-header">NUM</li>  
  <li>Num 1</li>
  <li>Num 2
    <ul>
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3</li>
    </ul>
  </li>
  <li>Num 3</li>
</ul>

</body>
</html>

サンプルでは、ul#menuをメニュー化している。liの中に更にulで階層を作ることも可能。

ちなみに、

$( "#menu" ).menu({
  items: "> :not(.ui-widget-header)"
});

の記述で、ui-widget-headerクラスを持つもの以外を選択項目としている。こうすることでカテゴリーを設けることが出来る。

Tabs

$("要素").tabs();

サンプル

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1つ目のタブ</a></li>
    <li><a href="#tabs-2">2つ目のタブ</a></li>
    <li><a href="#tabs-3">3つ目のタブ</a></li>
  </ul>
  <div id="tabs-1">
    <p>1つ目のタブの本文</p>
  </div>
  <div id="tabs-2">
    <p>2つ目のタブの本文</p>
  </div>
  <div id="tabs-3">
    <p>3つ目のタブの本文</p>
  </div>
</div>

</body>
</html>

サンプルではdiv#tabsの中にdiv#tabs-1からdiv#tabs-3まであって、それらがタブとして切り替わるようになる。
href="#tabs-x"の記述で対応するidのdivが表示される。
Tabsについてはオプションというか細かい部分を説明しようとするとボリュームありそうなので別の機会に。

Accordion

$("要素").accordion();

サンプル

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Menu</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>アコーディオンその1</h3>
  <div>
    <p>アコーディオンその1の本文</p>
  </div>
  <h3>アコーディオンその2</h3>
  <div>
    <ul>
      <li>アコーディオンその2-1</li>
      <li>アコーディオンその2-2</li>
      <li>アコーディオンその2-3</li>
    </ul>
  </div>
  <h3>アコーディオンその3</h3>
  <div>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">アコーディオンその3-1</a></li>
        <li><a href="#tabs-2">アコーディオンその3-2</a></li>
      </ul>
      <div id="tabs-1">
        <p>アコーディオンその3-1の本文</p>
      </div>
      <div id="tabs-2">
        <p>アコーディオンその3-2の本文</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

div#accordionの中身がアコーディオンになる。サンプルでは調子に乗ってアコーディオンの中に先程のTabsを仕込んでみた。
注意点は、div#accordionの子要素に対して、「1つ目見出し、1つ目中身、2つ目見出し。。。」と交互に割り振られること。
サンプルではh3=見出し、div=本文と交互に存在しているが、h3, div, div, h3, div...の様に構成するとh3=見出し、div=本文という対応が崩れる。
見出しと本文が途中で逆転したときなど、表示崩れが起きた場合は上記内容をチェックしてみると良いかもしれない。

jQuery UIで作るメニューあれこれ

メニュー的なものを作るときに使えそうなものをピックアップ

Menu

サンプル

Tabs

サンプル

Accordion

サンプル