Home > Logs > January 2008 > This Entry
ナビゲーションメニューの折りたたみを実現する Javascript
ul 要素と li 要素で構成されたナビゲーションの折りたたみを実現するための javascript です。
HTML タグ
以下のような HTML タグが組まれている場合に、折りたたみを実現することを考えます。「大項目」をクリックすれば「中項目」が現れ、現れた「中項目」をクリックすれば「小項目」のリストが表示される、とします。
<ul>
<li><a href="#">大項目</a>
<ul>
<li><a href="#">中項目</a>
<ul>
<li><a href="#">小項目1</a></li>
<li><a href="#">小項目2</a></li>
<li><a href="#">小項目3</a></li>
<li><a href="#">小項目4</a></li>
<li><a href="#">小項目5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
a 要素をクリックした場合に、親要素の li が内包している ul が展開されればよい、と考えることができます。
Javascript ソ−スコード
あんまり美しくないけど、以下のように書いたとします。
var ulShowHide = {
showHide: function(element) {
if (element.parentNode.childNodes.item(2)) {
if (element.parentNode.childNodes.item(2).nodeName == 'UL') {
var styleDisplay = element.parentNode.childNodes.item(2).style.display;
if (styleDisplay == 'block' || styleDisplay == '') {
element.parentNode.childNodes.item(2).style.display = "none";
} else {
element.parentNode.childNodes.item(2).style.display = "block";
}
}
}
return false;
}
}
HTML タグの編集
a 要素に onclick 属性として ulShowHide.showHide(this);return false; を追加します。return: false を追加するのは、IE で a 要素がクリックされた場合に、表示がページの一番上に戻ってしまうのを防ぐためです。
<ul>
<li><a href="#" onclick="ulShowHide.showHide(this);return false;">大項目</a>
<ul style="display: none;">
<li><a href="#" onclick="ulShowHide.showHide(this);return false;">中項目</a>
<ul style="display: none;">
<li><a href="#">小項目1</a></li>
<li><a href="#">小項目2</a></li>
<li><a href="#">小項目3</a></li>
<li><a href="#">小項目4</a></li>
<li><a href="#">小項目5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
結果
サンプルのダウンロード
以下のリンクからサンプルをダウンロードできます。各ファイルの格納についてはおれ基準になっていますがご了承ください。
MovableType で使う場合
例えばカテゴリ名をクリックすると、そのカテゴリに属するブログ記事を表示するような折りたたみを実現する場合は、以下のようにテンプレートを記述します。
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<li><a href="#" onclick="javascript:ulShowHide.showHide(this);return false;"><$MTCategoryLabel$></a>
<MTIfNonZero tag="MTCategoryCount">
<ul style="display: none;">
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</MTIfNonZero>
<$MTSubCatsRecurse$></li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
2 Comments on this Entry
-
IE6では動かない
April 15, 2008 11:01 AM
-
とても便利で簡単なメニューで早速設置させていただきました。
ただ ＩＥ7では動くのですが、ＩＥ6だと動作しません。対処方法はありますか？
例えば６だとメニューを開いた状態にしておくとか・・・
ご教授おねがいします
-
okayama
April 15, 2008 1:01 PM
-
> IE6では動かない さん
お手数おかけしてすみません。まず、サンプルとしてダウンロードできるファイルの ulShowHide.html の、<head> 内に記述している js ファイル読み込みタグの書き方に問題がありました。
(誤)
<script type="text/javascript" src="common/js/ulShowHide.js" />↓
(正)
<script type="text/javascript" src="common/js/ulShowHide.js"></script>まずは上記のように js ファイル読み込みタグを修正してみてください(現在、サンプルファイルはこの点を修正したものに差し替えております)。
それでも問題が起こるようでしたら、ページ URL をメールでお送りいただくか、もう少し詳細な状況を記述していただくなど、情報がほしいところです(僕の準備できる IE 6 環境では動作確認しているため)。
メールでお送りいただく場合は、weeeblog@gmail.com までお願いします。
Post Comment