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

No Photo

第 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;
}

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

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

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ