ドロップダウン折り畳みメニュー

メニューをクリックすると、その直下に小さなボックスとして 内容を表示させるメニューです。 次のサンプルをクリックしてみてください。

About
メニューをクリックすると内容がここに表示されます。
Memo
古いブラウザやJavaScriptが無効な環境などでは展開されて表示しますが、 その際の見栄えは良くはありません。
links
Amenti
Amenti - Customize Yaplog!

折り畳みメニューを動作させるための JavaScript です。ページ読み込み時に動作に 必要な属性を付加し、内容となるボックスは全てメニューの後になるよう配置します。 動作時は、クラスddt_textのvisibilityプロパティをhiddenならvisible、 visibleならhiddenとすることにより表示/非表示を切替えます。
<head>〜</head>の中に置いてください。

<script type="text/javascript"><!--
// This script is a part of drop down toggle menus.
// (C)2007 Amenti. http://amenti.usamimi.info/
// 2007/02/24 update.
// 2007/02/21 release.
// Terms of use: Keep to copyright. No claim. No support.
var ddt_open_tooltip="OPEN";
var ddt_close_tooltip="CLOSE";
var ddt_menu_color="#000";  // メニューの色
var ddt_menu_selected_color="#fff";  // 開いたときのメニューの色
var ddt_menu_partition="|";
var ddt_text_width=250;  // 表示されるボックスの幅(単位不要)
var ddt_title,ddt_text;

if (document.getElementById)
 document.write('<style type="text/css"> .ddt_text { display: none; } <'+'/style>');

if (window.addEventListener) window.addEventListener("load",ddt_init,false);
else if (window.attachEvent) window.attachEvent("onload",ddt_init);

function ddt_init() {
 if (!document.getElementById) return;
 var count=0;
 text=new Array;
 var ddt=document.getElementById("ddt");
 if (!ddt) return;
 var tn=ddt.getElementsByTagName("a");
 for (var i=0; i < tn.length; i++)
  if (tn[i].className == "ddt_title") {
   tn[i].setAttribute("id","ddt"+count);
   tn[i].href="javascript:ddt("+"'ddt"+count+"');";
   tn[i].setAttribute("title",ddt_open_tooltip);
   tn[i].style.color=ddt_menu_color;
   if (0 < count) tn[i].parentNode.insertBefore(document.createTextNode(ddt_menu_partition+" "), tn[i]);
   count++;
  }
 count=0;
 tn=ddt.getElementsByTagName("div");
 for (i=0; i < tn.length; i++)
  if (tn[i].className == "ddt_text") {
   text[count]=tn[i];
   tn[i].setAttribute("id","ddt"+count+"t");
   tn[i].style.visibility="hidden";
   tn[i].style.position="absolute";
   tn[i].style.zIndex="1000";
   tn[i].style.display="block";
   tn[i].style.width=ddt_text_width+"px";
   count++;
  }
 for (i=0; i < count; i++) ddt.appendChild(text[i]);
 ddt.style.position="relative";
 ddt.style.display="block";
 ddt.style.width="100%";
}

function ddt(title_id) {
 var title=document.getElementById(title_id);
 var text=document.getElementById(title_id+"t");
 if (text.style.visibility == "visible") {
  text.style.visibility="hidden";
  title.title=ddt_open_tooltip;
  title.style.color=ddt_menu_color;
  title.style.backgroundColor="transparent";
 }
 else {
  if (ddt_title) {
   ddt_text.style.visibility="hidden";
   ddt_title.title=ddt_open_tooltip;
   ddt_title.style.color=ddt_menu_color;
   ddt_title.style.backgroundColor="transparent";
  }
  var left=title.offsetLeft-(ddt_text_width-title.offsetWidth)/2;
  var right=title.offsetLeft+(ddt_text_width+title.offsetWidth)/2;
  if (right > document.body.offsetWidth-8)
   left=document.body.offsetWidth-8-ddt_text_width;
  if (left < 0) left=0;
  text.style.left=left+"px";
  text.style.top=title.offsetTop+title.offsetHeight+"px";
  text.style.visibility="visible";
  title.title=ddt_close_tooltip;
  title.style.color=ddt_menu_selected_color;
  title.style.backgroundColor=ddt_menu_color;
  ddt_text=text;
  ddt_title=title;
 }
}
// --></script>

続いて、スタイルシートです。

<style type="text/css"><!--
#ddt {
text-align: center;
}
.ddt_title, .ddt_title:link, .ddt_title:hover, .ddt_title:visited {
text-decoration: none;
}
.ddt_text {
border: solid 1px;
overflow: hidden;
padding: 4px;
text-align: left;
background: #fff;
}
--></style>

そして、以下がHTMLソースです。

<div id="ddt">
<noscript><p>JavaScriptを有効にしてください</p></noscript>

<a class="ddt_title">MENU1</a>
<div class="ddt_text">
MENU1の内容
</div><!-- ddt_text end -->

<a class="ddt_title">MENU2</a>
<div class="ddt_text">
MENU2の内容
</div><!-- ddt_text end -->

<a class="ddt_title">MENU3</a>
<div class="ddt_text">
MENU3の内容
</div><!-- ddt_text end -->

</div><!-- ddt end -->

最後の
</div><!-- ddt end -->
の行の手前に
<a class="ddt_title">MENU4</a>
<div class="ddt_text">
MENU4の内容
</div><!-- ddt_text end -->
と増やしていけば幾らでも追加することが出来ます。