Expanding Menu
navigation 1999 still worksA folder-style menu whose sections open and close when you click the heading.
In 2026: Works. In 1999 this needed three code paths: document.all for IE, document.layers for Netscape 4, and getElementById for everything after.
Where it came from: Dynamic Drive, roughly 1999, originally shipped in three browser-specific versions. Wikipedia ↗
<style>
.menu-head { cursor: pointer; font: bold 13px Verdana; color: #FFCC00;
background: #000060; padding: 4px 8px; margin-top: 2px; }
.menu-body { display: none; background: #000030; padding: 6px 18px; }
.menu-body a { color: #99CCFF; display: block; padding: 2px 0; }
</style>
<div class="menu-head" onclick="toggleMenu('m1')">+ My Pages</div>
<div class="menu-body" id="m1">
<a href="/about.html">About Me</a>
<a href="/pets.html">My Pets</a>
</div>
<div class="menu-head" onclick="toggleMenu('m2')">+ Links</div>
<div class="menu-body" id="m2">
<a href="/links.html">Cool Sites</a>
<a href="/ring.html">Web Ring</a>
</div>
<script language="JavaScript">
function toggleMenu(id) {
var b = document.getElementById(id);
var open = b.style.display === "block";
b.style.display = open ? "none" : "block";
b.previousSibling.previousSibling.innerHTML =
(open ? "+ " : "- ") + b.previousSibling.previousSibling.innerHTML.substring(2);
}
</script>