●JavaScript 不要なサイドメニューのツリー化
昨日実現したばかりのサイドメニューのツリー化だが、JavaScript を用いずに実現する方法が見つかり、本日、小粋空間さんのサイトで発表された。
この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがある。
- ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
- JavaScript 起動による表示遅延がなし
- JavaScript 関連のカスタマイズが不要
昨日の今日で、設置したばかりのツリー機能は1日も使っていないのだが、より良い方法が見つかればそれを使わない手はない。
実際にページリロード後にツリーの表示だけワンクッション置かれることが気になっていた。
まったくこの種の技術は日進月歩で予断を許さない。
1.基本的な設定方法
JavaScript を用いないため、ul 要素、li 要素に class 属性を記述する。
ul 要素:class="tree" を追加
li 要素:class="tree[MT開始タグ]_end[MT終了タグ]" を追加
Categories(カテゴリーリスト:サブカテゴリー表示)
<MTSubCategories>
<MTSubCatIsFirst><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
CSS設定項目
ul.tree {
margin: 0!important;
padding: 0!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 16px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.tree_end {
background-image: url(tree_end.gif);
list-style: none;
}
JavaScript を用いる場合のCSSとほぼ同じだが、一番最後のセレクタ名(tree_end)だけが異なっている。
参考:ツリー表示の仕組み
ツリー化を行うために、「順序無しリスト(ul - li)」を利用する。
通常の順序無しリストは左側にリストマークが表示されるが、ツリー化ではリストマークを非表示にし、その代わりにツリー画像("├" または "└")を、CSS の background-image プロパティを利用して表示する。
全てのリストに同じ画像を表示するのであれば簡単なのだが、ツリーの最後に "└" を表示するため、下記のように最後の li 要素に class 属性の指定が必要になる。
<ul>
<li>aaa</li>
<li>bbb</li>
<li class="tree">ccc</li>
</ul>
この class 属性によりどちらのツリー画像を表示するか判別する。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示する。
JavaScript を利用したツリー化のカスタマイズでは、JavaScript 実行により class 属性を付与している。
(したがってブラウザの「ソースの表示」では class 属性が設定されていないようにみえる)
早速反映してみて、表示速度が上がった事を確認した。
ツリーの横棒と文字の間隔がJavaScriptを用いたときよりも若干離れているがこれはulタグを使うためだろう。
全体の表示レスポンスを考慮に入れても気にするほどのことはないと思う。