Expanding Menus

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.

<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>