jQuery

【jQuery】ツリー構造のメニュープラグインTreemenu

July 2, 2017
treemenu

Treemenuはメニューリスト構造のjQueryプラグイン

Usage

jQueryを含む

<script src="jquery.min.js" type="text/javascript"></script>

treeMenuスクリプトとスタイルを含める

<script src="jquery.treemenu.js" type="text/javascript"></script>
<link href="jquery.treemenu.css" rel="stylesheet" type="text/css">

ツリーを作成する

<ul class="mytree">
    <li><a href="/transport/">Transport</a>
        <ul>
            <li><a href="/transport/hovertanks">Hover tanks</a></li>
            <li><a href="/transport/quadbikes">Quad bikes</a></li>
            <li><a href="/transport/ecars">Electro cars</a></li>
        </ul>
    </li>
    <li><a href="/weapons/">Weapons</a>
        <ul>
            <li><a class="active" href="/weapons/knives">Knives</a></li>
            <li><a href="/weapons/grenades">Grenades</a></li>
            <li><a href="/weapons/lasers">Lasers</a></li>
        </ul>
    </li>
    <li><a href="/suits/">Suits</a></li>
</ul>
 $(document).ready(function(){
      $("ul.mytree").treemenu();
  });

Options

オプションを使用

  1. delay
  2. openActive
  3. closeOther
  4. activeSelector
$("ul.mytree").treemenu({
  'delay': 300,
  'closeOther': true,
  'activeSelector': '.active',
  'openActive': true
});

MIT
Demo/Download