ドロップダウンメニューその１

あちこちのサイトを巡って見つけてきた方法。これは親がいくつに増えても対応できるようにJavaスクリプトが書かれている。なるほど！って感じです。(^^)

ドロップダウンのメニューそのものはdivで囲って、消してます。マウスが乗った時の変更は、CSSでつけてます。

HTML

<ul id="dropmenubar">
  <li>
    <a href="#" class="menu" id="menu1" onmouseover="menuopen(1);" onmouseout="menuclosetime();">親１</a>
    <div class="submenu" id="submenu1"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
        <a href="#">親１子１</a>
        <a href="#">親1子2</a>
        <a href="#">親1子3</a>
        <a href="#">親1子4</a>
    </div>
  </li>
  <li>
    <a href="#" class="menu" id="menu2" onmouseover="menuopen(2);" onmouseout="menuclosetime();">親２</a>
    <div class="submenu" id="submenu2"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
        <a href="#">親2子１</a>
        <a href="#">親2子2</a>
        <a href="#">親2子3</a>
        <a href="#">親2子4</a>
    </div>
  </li>
  <li>
    <a href="#" class="menu" id="menu3" onmouseover="menuopen(3);" onmouseout="menuclosetime();">親３</a>
    <div class="submenu" id="submenu3"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
        <a href="#">親3子１</a>
        <a href="#">親3子2</a>
        <a href="#">親3子3</a>
        <a href="#">親3子4</a>
    </div>
  </li>
  <li>
    <a href="#" class="menu" id="menu4" onmouseover="menuopen(4);" onmouseout="menuclosetime();">親４</a>
    <div class="submenu" id="submenu4"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
        <a href="#">親4子１</a>
        <a href="#">親4子2</a>
        <a href="#">親4子3</a>
        <a href="#">親4子4</a>
    </div>
  </li>
</ul>

CSS

#dropmenubar {margin:0; padding:0;}

#dropmenubar li {float:left; margin:0; padding:0; list-style: none; 
  font: bold 12px arial;}

#dropmenubar li a.menu {
  display: block;
  text-align: center;
  background: #e0e0e0;
  padding: 4px 10px;
  margin: 0 1px 0 0;
  color: #333333;
  width: 100px;
  text-decoration: none;
}

#dropmenubar li a.menu:hover {
  background: #666666;
  color: #f8f8f8;
}

.submenu {
  background: #b8b8b8;
  border: 1px solid #333333;
  visibility: hidden;
  position: absolute;
  z-index: 3;
}

.submenu a {
  display: block;
  font: 12px arial;
  text-align: left;
  text-decoration: none;
  padding: 5px;
  color: #333333;
}

.submenu a:hover {
  background: #666666;
  color: #ffffff;
}

JS

/* dropdown */

var TimeOut         = 100;
var currentLayer    = null;
var currentitem     = null;
var currentLayerNum = 0;
var noClose         = 0;
var closeTimer      = null;

function menuopen(n) {
	var sub  = document.getElementById("submenu" + n);
	var main = document.getElementById("menu" + n);

	if(sub) {
		cancelclose();
		sub.style.visibility='visible';
		if(currentLayer && (currentLayerNum != n))
		currentLayer.style.visibility='hidden';
		currentLayer = sub;
		currentitem = main;
		currentLayerNum = n;
	} else if(currentLayer) {
		currentLayer.style.visibility='hidden';
		currentLayerNum = 0;
		currentitem = null;
		currentLayer = null;
		}
}

function menuclosetime() {
	closeTimer = window.setTimeout(menuclose, TimeOut);
}

function cancelclose() {
	if(closeTimer) {
		window.clearTimeout(closeTimer);
		closeTimer = null;
	}
}

function menuclose() {
	if(currentLayer && noClose!=1)   {
		currentLayer.style.visibility='hidden';
		currentLayerNum = 0;
		currentLayer = null;
		currentitem = null;
		} else {
	noClose = 0;
	}
		currentLayer = null;
		currentitem = null;
}
document.onclick = menuclose; 

↑ページトップへ