[使えるCSSテクニックVol.2] CSS を使った見栄えの良いツリーナビゲーション

使えるCSSテクニック Vol.02

nakayama

2008.11.17

第 6 回は「見栄えの良いツリーナビゲーション」です。

今回は CSS と言うよりも jquery の plugin「Treeview」を使ったツリーナビゲーションをご紹介したいと思います。

実装するとこのような感じになります。

ホーム
- 会社案内
- 採用
  - 中途採用
    - 中途採用情報
    - エントリー
  - 新卒者採用
- プライバシーポリシー
- お問い合わせ

設置方法

上のサンプルの設定を例に説明します。

まずサイトから「Treeview」をダウンロードします。
解凍してフォルダを置く（解凍したフォルダ名を js に変更）
<head>～</head>内に
<link rel="stylesheet" href="js/jquery.treeview.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
を記述
<script type="text/javascript" src="js/demo/demo.js"></script>
を記述
<ul> に id と class を設定すれば完了です。

※2012/1/9 追記： jsのパスが間違っているとのご指摘がありました。訂正いたします。

XHTML は以下のように記述します。

<ul id="browser" class="filetree">
<li><span class="folder"><a href="hoge">ホーム</a></span>
	<ul>
	<li><span class="folder">会社案内</span>
		<ul>
		<li><span class="file"><a href="hoge">会社概要</a></span></li>
		<li><span class="file"><a href="hoge">コンセプト</a></span></li>
		<li><span class="file"><a href="hoge">沿革</a></span></li>
		<li><span class="file"><a href="hoge">社長挨拶</a></span></li>
		<li><span class="file"><a href="hoge">交通アクセス</a></span></li>
		</ul>
	</li>
	<li><span class="folder"><a href="hoge">採用</a></span>
		<ul>
		<li><span class="folder">中途採用</span>
			<ul>
			<li><span class="file"><a href="hoge">中途採用情報</a></span></li>
			<li><span class="file"><a href="hoge">エントリー</a></span></li>
			</ul>
		</li>
		<li><span class="folder">新卒者採用</span>
			<ul>
			<li><span class="file"><a href="hoge">新卒者採用情報</a></span></li>
			<li><span class="file"><a href="hoge">エントリー</a></span></li>
			<li><span class="file"><a href="hoge">先輩の声</a></span></li>
			</ul>
		</li>
		</ul>
	</li>
	<li><span class="file"><a href="hoge">プライバシーポリシー</a></span></li>
	<li><span class="file"><a href="hoge">お問い合わせ</a></span></li>
	</ul>
</li>
</ul>

これで上のサンプルの完成です。

id と class

サイトの DEMO には今回作成したサンプルの id と class の他にもあります。 id と class の設定を変えると背景の＋－アイコンの色やアニメーションが追加されたりします。以下が id と class です。

id

navigation
browser
red
black
gray

class

filetree
treeview-red
treeview-black
treeview-gray

画像を変更してみる

ダウンロードしたフォルダに jquery.treeview.css があります。画像のパスを変更したり新たに class を作成することで以下のように見た目を変更することも可能です。

下のサンプルは id="red" class は filetree2 （新しく作成したもの）です。

ホーム
- 会社案内
- 採用
  - 中途採用
    - 中途採用情報
    - エントリー
  - 新卒者採用
- プライバシーポリシー
- お問い合わせ

CSSはこんな感じ

.filetree2 li {
	padding: 3px 0 2px 16px;
}
.filetree2 li span.home,　/* ホーム */
.filetree2 li span.build,　/* 会社案内 */
.filetree2 li span.recruit,　/* 採用 */
.filetree2 li span.folder,　/* フォルダアイコン */
.filetree2 li span.file {　/* ファイルアイコン */
	display: block;
	padding: 1px 0 1px 18px;
}
.filetree2 li span.home {
	background: url(images/ic_home.gif) 0 0 no-repeat;
}
.filetree2 li span.folder {
	background: url(images/ic_category_del.gif) 0 0 no-repeat;
}
.filetree2 li.expandable span.folder {
	background: url(images/ic_category_add.gif) 0 0 no-repeat;
}
.filetree2 li span.file {
	background: url(images/ic_page.gif) 0 0 no-repeat;
}
.filetree2 li span.build {
	background: url(images/ic_building_del.gif) 0 0 no-repeat;
}
.filetree2 li.expandable span.build {
	background: url(images/ic_building_add.gif) 0 0 no-repeat;
}
.filetree2 li span.recruit {
	background: url(images/ic_recruit_del.gif) 0 0 no-repeat;
}
.filetree2 li.expandable span.recruit {
	background: url(images/ic_recruit_add.gif) 0 0 no-repeat;
}

今回は画像を変更しただけですが、大分印象が変わったと思います。

次回は「見栄えの良い引用文」です。お楽しみに