foldout menu

Hvordan skal det foldes ud?

Sådan http://www.efusion.it/exp/312370.html ??

Har du set en side hvor det benyttes?

sådan som du har lavet det, ville være nice..!

Hvis du ikke allerede har snuppet koden, kommer den her:


<html>
<head>
<style type="text/css">
div.describe {
    border: 3px solid #CC0000;
}

a.link {
    background-color: #FFFFFF;
    color: #CC0000;
}
a.link_sel {
    background-color: #CC0000;
    color: #FFFFFF;
}
</style>
<script type="text/javascript">
<!--

function showhide(id) {

    var i = 1;
   
    while (document.getElementById('desc'+i)) {
       
        var oDesc = document.getElementById('desc'+i);
        var oLink = document.getElementById('link'+i);
       
        if (i == id) {

            oDesc.style.display = (oDesc.style.display == "none" ? "block" : "none");
            oLink.className = (oDesc.style.display == "none" ? "link" : "link_sel");

        } else {
           
            oDesc.style.display = "none";
            oLink.className = "link";

        }
       
        i++;
    }
}

//-->
</script>
</head>

<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" id="link1" class="link" onclick="showhide(1)">1. Bla bla bla bla bla bla bla</a></td>
  </tr>
  <tr>
    <td>
      <div id="desc1" class="describe" style="display: none">
      Bla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla bla bla
      bla bla blaBla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla
      bla bla bla bla blaBla bla bla bla bla bla bla
      </div>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#" id="link2" class="link" onclick="showhide(2)">2. Bla bla bla bla bla bla bla</a></td>
  </tr>
  <tr>
    <td>
      <div id="desc2" class="describe" style="display: none">
      Bla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla bla bla
      bla bla blaBla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla
      bla bla bla bla blaBla bla bla bla bla bla bla
      </div>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#" id="link3" class="link" onclick="showhide(3)">3. Bla bla bla bla bla bla bla</a></td>
  </tr>
  <tr>
    <td>
      <div id="desc3" class="describe" style="display: none">
      Bla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla bla bla
      bla bla blaBla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla
      bla bla bla bla blaBla bla bla bla bla bla bla
      </div>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#" id="link4" class="link" onclick="showhide(4)">4. Bla bla bla bla bla bla bla</a></td>
  </tr>
  <tr>
    <td>
      <div id="desc4" class="describe" style="display: none">
      Bla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla bla bla
      bla bla blaBla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla
      bla bla bla bla blaBla bla bla bla bla bla bla
      </div>
    </td>
  </tr>
</table>
</body>
</html>

kan du ikke gøre sådan, så den ikke folder ud lige under linket, men istedet folder ud, stadig under linket men bare lidt mere til højre..?

Sådan her: http://www.efusion.it/exp/371057.html ?

jja, men hvordan får jeg så flere menuer..? kopiere eller hvad..?

Du kopierer bare dette:

  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#" id="link4" class="link" onclick="showhide(4)">4. Bla bla bla bla bla bla bla</a></td>
  </tr>
  <tr>
    <td>
      <div id="desc4" class="describe" style="display: none">
      Bla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla bla bla
      bla bla blaBla bla bla bla bla bla blaBla bla bla bla bla bla blaBla bla
      bla bla bla bla blaBla bla bla bla bla bla bla
      </div>
    </td>
  </tr>

Huske at ændre id="desc4", id="link4" og onclick="showhide(4)" så de passer. Altså 4 tallet skal ændres. Den første "menu" hedder 1, næste 2 osv.