まわりの部品を押しのけないメニュー

質問

HTML小技集(http://lll.s21.xrea.com/)に載っている
「ツリーメニュー」のように、特定のリンクをクリックしたとき
指定された文字列などを表示するメニューが作りたいのですが
この「ツリーメニュー」の場合
開かれたメニュー以下の部品を押しのけて表示してしまいます。
この、ツリーメニューのようにクリックされたとき文字列などを表示するが
他の部品に影響を与えないツリーメニューを作るにはどうすればいいでしょうか？

回答No.1

leap_day · ベストアンサー

こんにちは

2通りありますがそれぞれデメリットもあります

【visibilityを使う】
<script type="text/javascript"><!--
function ok(id){
obj =document.getElementById(id);
obj.style.visibility = obj.style.visibility=="hidden"?"visible":"hidden";
}
//--></script>

<B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR>
<DIV ID="tree1" style="visibility:hidden">
　┣ 小技集<BR>
　┣ 役立つ雑学<BR>
　┣ ウザイページ<BR>
　┣ JavaScriptを勉強<BR>
　┗ 掲示板<BR>
</DIV>

<--デメリット-->
表示に目隠しをしてるだけなので余分な空白が必要になる

【positionを使う】
<script type="text/javascript"><!--
function ok(id){
obj =document.getElementById(id);
obj.style.display = obj.style.display=="none"?"block":"none";
}
//--></script>

<B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR>
<div style="position:relative;">
<DIV ID="tree1" style="display:none;position:absolute;top:0px;left:0px;">
　┣ 小技集<BR>
　┣ 役立つ雑学<BR>
　┣ ウザイページ<BR>
　┣ JavaScriptを勉強<BR>
　┗ 掲示板<BR>
</DIV>
</div>

<--デメリット-->
HTMLの上の階層として表示するので下の文字などと被さって表示される

これらのデメリットを踏まえた上で改良されれば理想のものはできると思います
例えば下であればid="tree1"に背景色(background-color)をつける・・とか

お礼

positionで十分です！！！
プログラムのメニュー風に作りたかったので！
これをうまく使えばVista Aero風（=半透明)なメニューが作れます！
ありがとうございました！