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

これは、ドロップダウンメニューその１と同じやり方で画像を使ってみた。マウスを乗せたときの変化はないので、CSSはシンプルになっている。

HTML

<ul id="dropmenubar">
  <li><a href="#" class="menu"><img src="image/home01.png" width="110" height="30" alt="ホーム" /></a></li>
  <li><a href="#" class="menu" id="menu1" onmouseover="menuopen(1);" onmouseout="menuclosetime();"><img src="image/about01.png" width="110" height="30" alt="概要" /></a>
    <div class="submenu" id="submenu1"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
    <a href="#"><img src="image/about01.png" width="110" height="30" alt="概要" /></a>
	<a href="#"><img src="image/about01.png" width="110" height="30" alt="概要" /></a>
	<a href="#"><img src="image/about01.png" width="110" height="30" alt="概要" /></a>
    <a href="#"><img src="image/about01.png" width="110" height="30" alt="概要" /></a>
    </div>
  </li>
  <li><a href="../ict.html" class="menu" id="menu2" onmouseover="menuopen(2);" onmouseout="menuclosetime();"><img src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
    <div class="submenu" id="submenu2"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
	<a href="#"><img src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
	<a href="#"><img src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
	<a href="#"><img src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
	<a href="#"><img src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
    </div>
  </li>
  <li><a href="#" class="menu" id="menu3" onmouseover="menuopen(3);" onmouseout="menuclosetime();"><img src="image/yamahatsu01.png" width="110" height="30" alt="山初" /></a>
    <div class="submenu" id="submenu3"
      onmouseover="cancelclose()"
      onmouseout="menuclosetime();">
	<a href="#"><img src="image/yamahatsu01.png" width="110" height="30" alt="山初" /></a>
	<a href="#"><img src="image/yamahatsu01.png" width="110" height="30" alt="山初" /></a>
    </div>
  </li>
  <li><a href="#" class="menu"><img src="image/contact01.png" width="110" height="30" alt="お問い合わせ" /></a></li>
</ul>

CSS

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

#dropmenubar li {
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}

#dropmenubar li a.menu {
	margin:0;
	padding:0;
	display:block;
}

.submenu {
	visibility:hidden;
	position:absolute;
	z-index:3;
}

.submenu a {
	margin:0;
	padding:0;
	display: block;
}

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; 

↑ページトップへ