Expanding text menu (IE only)

[Total: 0    Average: 0/5]

This shows how to have a text only menu that expands.

Body Code:

<style>
  a:hover {color:red}
</style>

<script language="JavaScript">
<!--
  var item1disp=0;
  var item2disp=0;
  var item3disp=0;
  var color=0;

  window.onerror=errortrap;

  function errortrap(msg,url,line)
  {    
    return true;
  }

  function OutlineClick() {
    var objSrc=window.event.srcElement;
    if (objSrc.id=="item1")
    {
      if (item1disp==0)
      { 
        document.all.item1d1.style.display="Inline";
        document.all.item1d2.style.display="Inline"; 
        document.all.item1d3.style.display="Inline"; 
        document.all.item1d4.style.display="Inline"; 
        item1disp=-1; 
      }
      else 
      {
        document.all.item1d1.style.display="None"; 
        document.all.item1d2.style.display="None"; 
        document.all.item1d3.style.display="None"; 
        document.all.item1d4.style.display="None"; 
        item1disp=0; 
      }
    }
    else
    {
      if (objSrc.id=="item2")
      {
        if (item2disp==0)
        { 
          document.all.item2d1.style.display="Inline"; 
          document.all.item2d2.style.display="Inline"; 
          item2disp=-1; 
        }
        else 
        {
          document.all.item2d1.style.display="None"; 
          document.all.item2d2.style.display="None"; 
          item2disp=0; 
        }
      }
      else
      {
        if (objSrc.id=="item3")
        {
          if (item3disp==0)
          { 
            document.all.item3d1.style.display="Inline"; 
            document.all.item3d2.style.display="Inline"; 
            document.all.item3d3.style.display="Inline"; 
            item3disp=-1; 
          }
          else 
          {
            document.all.item3d1.style.display="None"; 
            document.all.item3d2.style.display="None"; 
            document.all.item3d3.style.display="None"; 
            item3disp=0; 
          }
        } 
      }
    }
  }
  
  function TurnRed()
  {
    var elem=window.event.srcElement;
    color=elem.style.color;
    elem.style.color="RED";
  }

  function TurnBlack()
  {
    var elem=window.event.srcElement;
    elem.style.color=color;
  }


//-->
</script>

<A>Click Below and See What happens (IE only)</A></P>
<div id=Outline onclick="OutlineClick()">
<P> </P>
<P>
  <div id=item1 style="cursor: hand" onmouseover="TurnRed()" onmouseout="TurnBlack()"> Catagory 1 <BR>
    <div id=item1d1 style="display:None">   <A HREF="#">Index 1</A><BR></div>
    <div id=item1d2 style="display:None">   <A HREF="#">Index 2</A><BR></div>
    <div id=item1d3 style="display:None">   <A HREF="#">Index 3</A><BR></div>
    <div id=item1d4 style="display:None">   <A HREF="#">Index 4</A><BR></div>
  </div>
  <div id=item2 style="cursor: hand" onmouseover="TurnRed()" onmouseout="TurnBlack()"> Catagory 2 <BR>
    <div id=item2d1 style="display:None">   <A HREF="#">Index 1</A><BR></div>
    <div id=item2d2 style="display:None">   <A HREF="#">Index 2</A><BR></div>
  </div>
  <div id=item3 style="cursor: hand" onmouseover="TurnRed()" onmouseout="TurnBlack()"> Catagory 3 <BR>
    <div id=item3d1 style="display:None">   <A HREF="#">Index 1</A><BR></div>
    <div id=item3d2 style="display:None">   <A HREF="#">Index 2</A><BR></div>
    <div id=item3d3 style="display:None">   <A HREF="#">Index 3</A><BR></div>
  </div>
</div>
</P>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *