JavaScriptによるドロップダウンメニュー
参考：http://solidstate.jp/Navigation/DropdownMenu/script_4.html
基本：
dropdown.js
var DDSPEED = 10;
var DDTIMER = 15;
// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}
// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}dropdown.css
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
を、改造してみた。
メニューが横一列ではなく、横３×縦２なので、ドロップダウンしたメニューが重なることもあります。
なわけで、そのあたり手を加えてみた。
あと、マウスオーバーではなくマウスクリックに変更してます。
もとのプログラムではone-ddheaderといったＩＤつけてますが、上記メニューが重なることの対応も考えて、ddheader_1のように数字を後ろにつける形にしています。数字だと上下関係（1-4、2-5、3-6）はっきりさせやすいですからね。
あと、最初からメニューのいくつかを表示させています。
そんなわけで、改造版。
dropdown.js
var DDSPEED = 10;
var DDTIMER = 15;
// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById('ddheader_' + id);
var c = document.getElementById('ddcontent_' + id);
var o = document.getElementById('ddopener_' + id);
var b = document.getElementById('top_cat_' + id);
if(id >= 4){
var exc = document.getElementById('ddcontent_' + (id - 3));
var exo = document.getElementById('ddopener_' + (id - 3));
}
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '100px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
o.style.display = 'none';
if(id <= 3){
b.style.zIndex = '200';
c.style.zIndex = '200';
}else if(exc.style.zIndex == '200'){
h.timer = setTimeout(function(){ddCollapse(exc)},50);
exo.style.display = 'block';
b.style.zIndex = '300';
c.style.zIndex = '300';
}else{
b.style.zIndex = '100';
c.style.zIndex = '100';
}
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
o.style.display = 'block';
if(id <= 3){
c.style.zIndex = '111';
b.style.zIndex = '111';
}else{
c.style.zIndex = '1';
b.style.zIndex = '1';
}
}
}
// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round((c.offsetHeight - 100) / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}else if (dist <=1 && d != 1){
dist = 1;
}
if((d == 1) || (d !=1 && currh != 100)){
c.style.height = currh + (dist * d) + 'px';
}else{
c.style.height = '100px';
}
if(d == 1){
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
}
if((currh == 100 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
#frame #content #top_category {
width: 738px;
height: 329px;
line-height: 1.0;
font-size: 13px;
z-index: 1;
}
#frame #content #top_category div {
float: left;
width: 243px;
height: 150px;
z-index: 1;
position: relative;
}
#frame #content #top_category ul {
background-color: #CCCCCC;
margin: 0px 0px 0px 12px;
padding: 0px;
height: 100px;
overflow: hidden;
width: 231px;
z-index: 1;
position: relative;
}
#frame #content #top_category ul li {
list-style-type: none;
line-height: 1.0;
margin: 2px 0px 2px 0px;
padding: 10px 0px 6px 31px;
}
#frame #content #top_category ul li.top_cat_close {
background-image: url();
text-align: right;
padding-right: 10px;
}
#frame #content #top_category p {
margin: 0px;
padding: 0px 10px 0px 0px;
text-align: right;
position: relative;
z-index: 10;
}
#frame #content #top_category #top_cat_4 {
clear: left;
}html
<div id="top_category">
<div id="top_cat_1">
<ul id="ddcontent_1">
<li><a href="#">category 1-1</a></li>
<li><a href="#">category 1-2</a></li>
<li><a href="#">category 1-3</a></li>
<li><a href="#">category 1-4</a></li>
<li><a href="#">category 1-5</a></li>
<li class="top_cat_close"><a href="javascript:void(0);"><img src="images/top_cat_close.gif" alt="閉じる" onclick="ddMenu('1',-1)" border="0"></a></li>
</ul>
<p id="ddopener_1"><a href="javascript:void(0);" id="ddheader_1" onclick="ddMenu('1',1)"><img src="images/top_cat_open.gif" alt="表示" border="0"></a></p>
</div>
<div id="top_cat_2">
<ul id="ddcontent_2">
<li><a href="#">category 2-1</a></li>
<li><a href="#">category 2-2</a></li>
<li><a href="#">category 2-3</a></li>
<li><a href="#">category 2-4</a></li>
<li><a href="#">category 2-5</a></li>
<li class="top_cat_close"><a href="javascript:void(0);"><img src="images/top_cat_close.gif" alt="閉じる" onclick="ddMenu('2',-1)" border="0"></a></li>
</ul>
<p id="ddopener_2"><a href="javascript:void(0);" id="ddheader_2" onclick="ddMenu('2',1)"><img src="images/top_cat_open.gif" alt="表示" border="0"></a></p>
</div>
<div id="top_cat_3">
<ul id="ddcontent_3">
<li><a href="#">category 3-1</a></li>
<li><a href="#">category 3-2</a></li>
<li><a href="#">category 3-3</a></li>
<li><a href="#">category 3-4</a></li>
<li><a href="#">category 3-5</a></li>
<li><a href="#">category 3-6</a></li>
<li><a href="#">category 3-7</a></li>
<li><a href="#">category 3-8</a></li>
<li><a href="#">category 3-9</a></li>
<li class="top_cat_close"><a href="javascript:void(0);"><img src="images/top_cat_close.gif" alt="閉じる" onclick="ddMenu('3',-1)" border="0"></a></li>
</ul>
<p id="ddopener_3"><a href="javascript:void(0);" id="ddheader_3" onclick="ddMenu('3',1)"><img src="images/top_cat_open.gif" alt="表示" border="0"></a></p>
</div>
<div id="top_cat_4">
<ul id="ddcontent_4">
<li><a href="#">category 4-1</a></li>
<li><a href="#">category 4-2</a></li>
</ul>
<p id="ddopener_4"><a href="javascript:void(0);" id="ddheader_4"><img src="images/top_cat_open.gif" alt="表示" border="0"></a></p>
</div>
<div id="top_cat_5">
<ul id="ddcontent_5">
<li><a href="#">category 5-1</a></li>
<li><a href="#">category 5-2</a></li>
<li><a href="#">category 5-3</a></li>
<li><a href="#">category 5-4</a></li>
<li><a href="#">category 5-5</a></li>
<li class="top_cat_close"><a href="javascript:void(0);"><img src="images/top_cat_close.gif" alt="閉じる" onclick="ddMenu('5',-1)" border="0"></a></li>
</ul>
<p id="ddopener_5"><a href="javascript:void(0);" id="ddheader_5" onclick="ddMenu('5',1)"><img src="images/top_cat_open.gif" alt="表示" border="0"></a></p>
</div>
<div id="top_cat_6">
<ul id="ddcontent_6">
<li><a href="#">category 6-1</a></li>
<li><a href="#">category 6-2</a></li>
<li><a href="#">category 6-3</a></li>
<li><a href="#">category 6-4</a></li>
<li><a href="#">category 6-5</a></li>
<li><a href="#">category 6-6</a></li>
<li class="top_cat_close"><a href="javascript:void(0);"><img src="images/top_cat_close.gif" alt="閉じる" onclick="ddMenu('6',-1)" border="0"></a></li>
</ul>
<p id="ddopener_6"><a href="javascript:void(0);" id="ddheader_6" onclick="ddMenu('6',1)"><img src="images/top_cat_open.gif" alt="表示" border="0"></a></p>
</div>
</div>
