サイドドロップダウンメニューの実装 Dropdown menu

JavaScript

var dropdown = function(e) {
	var node       = null,
	    anchorNode = null,
	    targetId   = '',
	    thisId     = '',
	    nodes      = this.parentNode.childNodes;

	anchorNode = this.childNodes[0];
	targetId   = anchorNode.href;

	if ((n = targetId.lastIndexOf('#')) !== -1) {
		thisId = targetId.substring(n).replace('#', '');
		node   = document.getElementById(thisId);

		if (e.type === 'mouseover') {
			node.style.display    = 'block';
			node.style.visibility = 'visible';
		} else {
			node.style.display    = 'none';
			node.style.visibility = 'hidden';
		}
	}

	for (var i = 0, len = nodes.length; i < len; i++) {
		if (nodes[i].nodeType !== 1) continue;

		anchorNode = nodes[i].childNodes[0];
		targetId   = anchorNode.href;

		if ((n = targetId.lastIndexOf('#')) !== -1) {
			targetId = targetId.substring(n).replace('#', '');
			if (targetId !== '' && thisId !== targetId) {
				node = document.getElementById(targetId);
				node.style.display    = 'none';
				node.style.visibility = 'hidden';
			}
		}
	}
};

var menu01Btn = document.getElementById('menu01'),
    menu02Btn = document.getElementById('menu02');

menu01Btn.onmouseover = dropdown;
menu01Btn.onmouseout  = dropdown;
menu02Btn.onmouseover = dropdown;
menu02Btn.onmouseout  = dropdown;

HTML

<ul id="dropdown">
	<li><a href="">menu 1</a></li>
	<li id="menu01"><a href="#dd01">menu 2</a>
		<ul id="dd01">
			<li><a href="">menu 2-1</a></li>
			<li><a href="">menu 2-2</a></li>
			<li><a href="">menu 2-3</a></li>
			<li><a href="">menu 2-4</a></li>
			<li><a href="">menu 2-5</a></li>
		</ul>
	</li>
	<li id="menu02"><a href="#dd02">menu 3</a>
		<ul id="dd02">
			<li><a href="">menu 3-1</a></li>
			<li><a href="">menu 3-2</a></li>
			<li><a href="">menu 3-3</a></li>
			<li><a href="">menu 3-4</a></li>
			<li><a href="">menu 3-5</a></li>
		</ul>
	</li>
	<li><a href="">menu 4</a></li>
	<li><a href="">menu 5</a></li>
</ul>

HTML

ul#dropdown {
	margin:0;
	padding:0;
	width:150px;
	list-style:none;
}

	ul#dropdown li {
		position:relative;
		margin:0;
		padding:0;
		width:150px;
		height:27px;
		vertical-align:top;
	}

		ul#dropdown li a {
			display:block;
			border-top:1px solid #ddd;
			border-left:1px solid #ddd;
			border-right:1px solid #999;
			border-bottom:1px solid #999;
			padding:5px;
			width:138px;
			height:15px;
			background-color:#f5f5f5;
			line-height:15px;
			color:#000;
			text-decoration:none;
		}

		ul#dropdown li a:hover {
			background-color:#eaf5fd;
		}

		ul#dropdown li ul {
			visibility:hidden;
			display:none;
			position:absolute;
			top:0;
			left:150px;
			margin:0;
			padding:0;
			width:150px;
			list-style:none;
		}