リンクをクリックすると、隠れていたリンクが出るようにします。
さらにそのリンクからリンクが出てくるように、階層を作ることもできます。
大きな分類を表示して、クリックすると細かい分類のリンクが出てくるようにすると、
レイアウトがすっきりして見やすくなると思います。
隠しておける部分はリンクでなくてもいいし、タグも使えるので画像なども出てくるようにできます。
同じ機能の折りたたみリンクで、リンクの前にクリック前後で入れ替わる画像をつけるプログラムも
こちら
で紹介していますが、こっちの方が断然簡単です…。
<見本>
1) 表示する部分には、以下のタグを使います。
下の4行 ( <a href=〜>〜</div> ) を1グループとして、これに半角英数字で名前をつけて3か所の【名前】に同じものを入れます。
隠すリンクの中にさらに隠すようにしたい場合は、【リンクに隠す文字や画像】の中に
<a href=〜>〜</div>までのグループを同じように作ります。
【名前】には、半角英数字で別の名前をつけて3か所に入れます。
これをくり返して、階層を作ることができます。
<script language=javascript>
<!--
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "category_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
}else{
objID.style.display='none';
objID.className='close';
}
}
//-->
</script>
<a href="javascript:void(0)" id="category_【名前】" onclick="show('【名前】');">
【リンクに表示する文字や画像】</a>
<div id="layer_【名前】" style="display: none;position:relative;margin-left:15pt" class="close">
【リンクに隠す文字や画像】
</div>
|
※隠れたリンクが出てきたときの位置を変えたい場合は、「margin-left:15pt」の数字を調整して下さい。
そのタグの左に何ピクセルの余白を作るかというタグです。
「HTMLタグ」のトップに戻る
|
|
|