Web development, coding & SEO

Expandable menu JavaScript

 

Expandable Listmenu Script. Author: Daniel Nolan. http://www.dnolan.com/code/js/listmenu/ http://www.bleedingego.co.uk/webdev.php

If you want a menu to appear already expanded on document load then you will need to change the class="treenode" attribute to class="treenodeopen".

Markup

<div class="menu">
	<ul>
		<li class="treenode">
			<a href="#">Primary</a>
			<ul>
				<li><a href="#">Secondary</a></li>
				<li><a href="#">Secondary</a></li>
				<li><a href="#">Secondary</a></li>
				<li><a href="#">Secondary</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

.menu ul{
	list-style:none;
	margin:0;
	padding:0;
}
.menu li{
	display:inline;
}
.menu a{
	display:block;
	padding-left:12px; /*SPACE FOR BACKGROUND*/
}
.menu .treeopen{
	background:url("open.png") left center no-repeat;
}

.menu .treeclosed{
	background:url("closed.png") left center no-repeat;
}

JavaScript

function initMenus() {
	if (!document.getElementsByTagName) return;
	var aMenus = document.getElementsByTagName("LI");
	for (var i = 0; i < aMenus.length; i++) {
		var mclass = aMenus[i].className;
		if (mclass.indexOf("treenode") > -1) {
			var submenu = aMenus[i].childNodes;
			for (var j = 0; j < submenu.length; j++) {
				if (submenu[j].tagName == "A") {
					submenu[j].onclick = function() {
						var node = this.nextSibling;
						while (1) {
							if (node != null) {
								if (node.tagName == "UL") {
									var d = (node.style.display == "none")
									node.style.display = (d) ? "block" : "none";
									this.className = (d) ? "treeopen" : "treeclosed";
									return false;
								}
								node = node.nextSibling;
							} else {
								return false;
							}
						}
						return false;
					}
					submenu[j].className = (mclass.indexOf("open") > -1) ? "treeopen" : "treeclosed";
				}
				if (submenu[j].tagName == "UL")
					submenu[j].style.display = (mclass.indexOf("open") > -1) ? "block" : "none";
			}
		}
	}
}
window.onload = initMenus;

2009

---