この表示だとエントリーが多くなるとナビゲーションが縦長になってしまします。
ですので、JavaScriptを使ってカテゴリー名をクリックすると、そのカテゴリーに属するエントリーが表示されるようにカスタマイズします。
<ul>
<MTCategories>
<li><a href="javascript:showhide('cate<$MTCategoryLabel trim_to="4"$>menu');"><$MTCategoryLabel pmhc=""$></a>
<ul id="cate<$MTCategoryLabel trim_to="4"$>menu" <MTIfCat_eq_Ent>style="displey:block;"</MTIfCat_eq_Ent> <MTNotIfCat_eq_Ent>style="displey:none;" >
<MTEntries sort_order="ascend">
<li class="entry_list"><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</li>
</MTCategories>
</ul>
まず、ここ。
<li><a href="javascript:showhide('cate<$MTCategoryLabel trim_to="4"$>menu');">
カテゴリー名をaタグで囲みhrefにjavascriptの関数showhideを実行するように設定します。showhideは自分で定義した関数です。
自分はカテゴリー名を「0100)カテゴリー名」のようにつけて、「0100)」の部分は、「pmHeadChanger」というプラグインで表示されないようにしています。
ですので引数には、「cate0100menu」のような値が渡されます。
次に、ここ。
<ul id="cate<$MTCategoryLabel trim_to="4"$>menu" <MTIfCat_eq_Ent>style="displwy:block"</MTIfCat_eq_Ent> <MTNotIfCat_eq_Ent>style="displwy:hide" >
エントリー名が並ぶliタグを囲むulタグにidを設定しています。
ulのid属性の値は「cate0100menu」のように表示されます。
関数showhideに渡した引数と一致させると後が楽です。
確かid属性の値は日本語が使えないはずですので、日本語が含まれないようにしました。
<MTIfCat_eq_Ent>は「MTIfCategory」というプラグインによるものです。詳しくはこちら
このプラグインによって、あるカテゴリー内のエントリーを表示しているときには、そのカテゴリーのエントリーリストは最初から表示されるようにしています。
そうすることで、今どのカテゴラリー内にいるのかわかりやすくなると思います。
では、showhide関数の中身です。
function showhide(id){
if(document.getElementById){
ulObj = document.getElementsByTagName("ul");
n = document.getElementsByTagName("ul").length;
for(i=0;i<=n-1; i++){
ulId = ulObj[i].id;
if(ulId){
if(ulId !=id)
document.getElementById(ulId).style.display = "none";
if(ulId == id )
if(document.getElementById(id).style.display == "block")
document.getElementById(id).style.display = "none";
else
document.getElementById(id).style.display = "block";
}
}
}
}
簡単に説明すると、
まず、カテゴリー名をクリックすると「cate0100menu」といったそのカテゴリーを表す文字列が引数として、このshowhide関数に綿割れ、変数idに格納しています。
document.getElementsByTagName("ul");でulタグのオブジェクトを取得して、forでループします。
ループの中では、取得したオブジェクトのidと引数で送られてきたidが一致するかしないかで条件分岐します。
一致しない場合は「display="none"」を設定します。
一致した場合は、
もし現在表示されているなら「display="none"」を設定して、非表示にします。
現在非表示ならば「display = "block"」を設定して表示します。
これで、問題なく動くのですが問題があります。
スタイルシートを使用せずにこのページを表示すると、各エントリーへのリンクが表示されません。
また、グーグルの検索結果でキャッシュを表示し、「テキストだけのバージョン」を表示した場合も各エントリーへのリンクは表示されません。
検索エンジンのロボットも各エントリーへのリンクを見つけることができず、各エントリーへクロールしない可能生があります。
これは、インラインでstyleを「display:none」設定してるのが原因です。
インラインではなくセレクタを使用して、「display:none」を設定すれば、「テキストだけのバージョン」を表示したさいCSSは読み込まれませんので、各エントリーへのリンクは表示されます。
ですので、「style="display:none;"」の部分を以下のように変更します。
<ul id="cate<$MTCategoryLabel trim_to="4"$>menu" <MTIfCat_eq_Ent>class="block"</MTIfCat_eq_Ent> <MTNotIfCat_eq_Ent>class="hide" >
スタイルシートには、
.block{
display:block;
}
.hide{
display:none;
}
というようにクラスセレクタでスタイルを定義します。
これで「テキストのみバージョン」でも、各エントリーへのリンクは表示されるようになりました。
しかし、各エントリーに移動した後に、現在表示されているナビゲーションのカテゴリー名をクリックした場合、1度目のクリックでは非表示にはならず、2度目のクリックで始めて非表示になります。
それもそのはずで、1度目のクリック前は「display:block」がインラインで設定されていませんので、条件分岐が上手くいかないからです。
【追記】
上記の問題解決は、簡単なことでした。
「class="block"」としている部分を「style="display:block"」にすればいいだけでした。