Home Page -> DOM Tutorials -> Expanding Menus

Expanding Menus

Search Engines
Web Design
Digital Photography

And finally, it's possible to do hierarchical menus quite easily, as shown at the right. Again, click the plus and minus signs to expand and contract the menu.

These are just two ideas of how to use the display property to enhance your website's content. If you have other ideas, please let me know.

As to the code, here are the stylesheet and script, and a portion of the HTML.

<style type="text/css">
<!--
.submenu {
    display:none;
    margin-left: 2em;
}
.mhead {
    background-color: #ccccff;
    display: block;
    font-size: 150%;
}
-->
</style>

<script language="JavaScript">
function showMenu( divNum )
{
    if (getIdProperty( "s" + divNum, "display") != "block" )
    {
        setIdProperty("s" + divNum, "display", "block");
        document.images["i" + divNum].src = "../minus.png";
    }
    else
    {
        setIdProperty("s" + divNum, "display", "none");
        document.images["i" + divNum].src = "../plus.png";
    }
}
</script>

<div class="mhead">
<a href="javascript:showMenu(0);"><img src="../plus.png"
    name="i0" border="0" width="12" height="12"></a> Search Engines</a>
</div>
<div class="submenu" id="s0">
<a href="http://www.google.com/">Google</a> <br>
<a href="http://www.yahoo.com/">Yahoo!</a> <br>
<a href="http://www.excite.com/">Excite</a> <br>
<a href="http://www.lycos.com/">Lycos</a>
</div>

  Expanding Text  DOM Tutorials