【-】 スポンサーサイト

一定期間更新がないため広告を表示しています

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

HTML・CSS JavaScriptメモ(2):折り畳みナビ

「in the cage」と「avion」で使ってる折り畳みナビの紹介ですー。

■タイトルで開閉、折り畳みナビ

<headまたは外部JSファイル内>
function ShortNavi() {
FoldNavi('newentry','close');
FoldNavi('category','close');
FoldNavi('comment','close');
FoldNavi('trackback','close');
FoldNavi('archives','close');
FoldNavi('recom','close');
FoldNavi('links','close');
FoldNavi('prof','close');
FoldNavi('fs1','close');
FoldNavi('fs2','close');
FoldNavi('fs3','close');
FoldNavi('fs4','close');
FoldNavi('fs5','close');
}
function FoldNavi(idName,initMode) {
var idTitle = Array(idName,'name').join('');
var idList = Array(idName,'list').join('');
var objTitle = this.document.getElementById(idTitle);
var objLists = this.document.getElementById(idList);
if (!objTitle || !objLists) return;
var dispMode = objLists.style.display;
if (!dispMode) {
var tmpText = Array('FoldNavi(',"'",idName,"','chng','');return(false);").join('');
var insMark = new Array();
var insText = new Array();
insMark[insMark.length] = Array('<a href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
insText[insText.length] = insMark.join('');
insText[insText.length] = objTitle.innerHTML + '</a>';
objTitle.innerHTML = insText.join('');
objLists.style.display = (initMode == 'close') ? 'none' : 'block';
} else if (initMode == 'chng') {
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
}
}

<body>
<body onload="javascript:ShortNavi();" id="n{eid}">

◇仕組み+使い方
コレは元々、JUGEMカスタマイズ講座(現在は更新を休止しているようです)で公開されていた折り畳みスクリプトに手を加えたものです。
指定されたIDの中のテキストに、開閉用のリンクを追加し、指定されたIDをクリックで開けたり閉じたりする、というもの。
JUGEMカスタマイズ講座のは、開閉するリンク用の文字、マークを追加したりしていましたが、タイトル自体が開閉用リンクになった方がシンプルな気がしたので、改造してみました。
といっても、追加する開閉用リンクの文字を指定する箇所をテキストに指定し直しただけですが。
FoldNavi('newentry','close');

↑で適用するID、最初にクリックする前の状態(closeまたはopen)を指定します。
で、htmlの適用する箇所ですが、ちょっと注意が必要。
<h3 id="newentryname"></h3>
<ul id="newentrylist">
<li></li>
</ul>

という風に、開閉用リンクにしたい場所は、「ID+name」、実際に閉じたり開いたりするしたい箇所には「ID+list」という感じで指定します。


◇メリット
・使うとデザイン的にすっきりするので、画面が見やすい。
・閲覧者的にはあまり目に入らなくて良いものを隠せる。

◇デメリット
・設置が面倒。
・スクリプトが長い

2007.06.28 / 01:20 | CM : 0 | TB : 0

△PAGE UP

【-】 スポンサーサイト

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

<< JavaScriptメモ(1):広告カラーリングMAINJavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29) >>

Comment

Trackback

トラックバックURL :