ツリー型メニューを表示するには

概要
実例
ソース
履歴

概要

jQueryを用いて、ツリー型のメニューを表示する方法を紹介します。

実例

ソース

ソース
  tree-menu.html
  js
    tree-menu.js
    jquery-1.8.3.min.js
  css
    tree-menu.css
  image
    file.png
    folder-close.png
    folder-open.png

一括でダウンロードしたい場合はこちら。

tree-menu-1.1.zip

tree-menu.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>Tree-View</title>
<link rel="stylesheet" href="css/tree-menu.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/tree-menu.js"></script>
<style>
#container {
    white-space: nowrap;
}
#menu-frame {
    float: left;
    width: 160px;
    height: 600px;
    margin: 0;
    border: 1px solid gray;
    font-family: "Meiryo UI", "メイリオ", "MS UI Gothic"; "ヒラギノ角ゴシック";
}
#main-frame {
    width: 760px;
    height: 600px;
    margin: 0;
    border: 1px solid gray;
}
</style>
<base target="main-frame">
</head>
<body>
<div id="container">
  <div id="menu-frame">
    <ul class="tree-menu">
    <li><a href="#">リンク</a>
      <ul>
      <li><a href="#">Web技術</a>
        <ul>
        <li><a href="http://www.tohoho-web.com/html/">HTML</a>
	  <ul>
          <li><a href="http://www.tohoho-web.com/html/a.htm">&lt;a&gt;</a></li>
          <li><a href="http://www.tohoho-web.com/html/abbr.htm">&lt;abbr&gt;</a></li>
          <li><a href="http://www.tohoho-web.com/html/acronym.htm">&lt;acronym&gt;</a></li>
	  </ul>
	</li>
        <li><a href="http://www.tohoho-web.com/js/">JavaScript</a>
	  <ul>
          <li><a href="http://www.tohoho-web.com/js/layer.htm#above">above</a></li>
          <li><a href="http://www.tohoho-web.com/js/math.htm#abs">abs()</a></li>
          <li><a href="http://www.tohoho-web.com/js/math.htm#acos">acos()</a></li>
	  </ul>
	</li>
        <li><a href="http://www.tohoho-web.com/css/">CSS</a>
	  <ul>
          <li><a href="http://www.tohoho-web.com/css/selector.htm#active">:active</a></li>
          <li><a href="http://www.tohoho-web.com/css/selector.htm#after">:after</a></li>
          <li><a href="http://www.tohoho-web.com/css/reference.htm#azimuth">azimuth</a></li>
	  </ul>
	</li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </div>
  <iframe id="main-frame" name="main-frame">
  </iframe>
</div>
</body>
</html>

JavaScriptライブラリとして、jQuery、tree-menu.js、スタイルシートとして tree-menu.css を読み込みます。ツリーは、<ul>, <li> で記述し、最初の <ul> に class="tree-menu" を指定します。テキストは必ず <a>～</a> で囲んでください。

tree-menu.js

$(function() {
    $(".tree-menu a").each(function() {
        if ($(this).parent("li").children("ul").size()) {
            $(this).addClass("folder-close");
        } else {
            $(this).addClass("file");
        }
    });
    $(".tree-menu a").click(function() {
        $(".tree-menu a").removeClass("current");
        $(this).addClass("current");
        $(this).parent("li").children("ul").toggle(100, function() {
            if ($(this).parent("li").children("ul").css("display") == "block") {
                $(this).parent("li").children("a").removeClass("folder-close");
                $(this).parent("li").children("a").addClass("folder-open");
            } else {
                $(this).parent("li").children("a").removeClass("folder-open");
                $(this).parent("li").children("a").addClass("folder-close");
            }
        });
        if ($(this).attr("href") != "#") {
            return true;
        } else {
            return false;
        }
    });
});

最初に、ul子要素があればフォルダアイコンを、無ければファイルアイコンを表示しています。リンクがクリックされると、ul子要素の表示を切り替えます。また、開いたときにはフォルダアイコンを開いたものに、閉じたときは閉じたアイコンに切り替えます。リンク先が # の時は false を返して以降のクリックイベントを無効にします。# 以外の時は true を返してリンク先にジャンプします。

tree-menu.css

.tree-menu {
    font-size: 9pt;
    line-height: 13pt;
    min-height: 300px;
    float: left;
    margin: 0;
    margin-left: 0;
    padding: 5px;
    white-space: nowrap;
}
.tree-menu ul {
    display: none;
    margin-left: 16px;
    padding: 0;
    list-style: none;
}
.tree-menu li {
    list-style: none;
    padding: 0;
}
.tree-menu a {
    padding: 0 4px 0 19px;
    background-position: top left;
    background-repeat: no-repeat;
}
.tree-menu a.file {
    background-image: url(../image/file.png);
}
.tree-menu a.folder-close {
    background-image: url(../image/folder-close.png);
}
.tree-menu a.folder-open {
    background-image: url(../image/folder-open.png);
}
.tree-menu a:link {
    color: #0044cc;
    text-decoration: none;
}
.tree-menu a:visited {
    color: #000066;
    text-decoration: none;
}
.tree-menu a:hover {
    color: #ff0000;
}
.tree-menu .num {
    font-size: 8pt;
    color: #999999;
}
.tree-menu .current {
    background-color: #e0e0ff;
}

image

 file.png
 folder-close.png
 folder-open.png

履歴

Ver1.0 (2013/01/12) 初版
Ver1.1 (2015/03/05) アイコン変更。カレントメニューに背景色を追加

初版：2013年1月12日、最終更新：2015年3月5日

https://www.tohoho-web.com/tech/tree-menu.htm