Beispiel-Code

Die Steuersequenz <?tcl dropdown ?> erbringt im Prinzip so einen HTML-Text:

<div>
  <div>
    <table border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td class='upside'>
            <div class="menuhead" id="menuhead1">
              <a>Eins</a>
              <div class="menubody" id="menubody1">
                <div>
                  <a href="zu_Eins/EinsA.html" target="_top">EinsA</a>
                </div>
                <div>
                  <a href="zu_Eins/EinsB.html" target="_top">EinsB</a>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="menuhead" id="menuhead2">
              <a href="Zwo.html" target="_top">Zwo</a>
              <div class="menubody" id="menubody2">
                <div>
                  <a href="zu_Zwo/ZwoA.htm" target="_top">ZwoA</a>
                </div>
                <div>
                  <a href="zu_Zwo/ZwoB.htm" target="_top">ZwoB</a>
                </div>
              </div>
            </div>
          </td>
        </tr>
      <tbody>
    </table>
  </div>
  <noscript>
    <div>
      <div>
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td>
                <div class="menuhead" id="menuhead1">
                  <a href="zu_Eins/EinsA.html" target="_top">EinsA</a>
                </div>
              </td>
              <td>
                <div class="menuhead" id="menuhead2">
                  <a href="zu_Eins/EinsB.html" target="_top">EinsB</a>
                </div>
              </td>
            </tr>
          <tbody>
        </table>
      </div>
    </div>
  </noscript>
</div>

Erläuterung

Eine Tabelle mit einer Tabellenzeile enthält pro Tabellenfeld einen Link – ähnlich den Registerlaschen. Die „obenliegende“ Registerlasche ist die Tabellenzelle mit der ID upside.

Innerhalb der Tabellenzelle steht das Element <div class=“menuhead“ id=“menuhead1“>, das den „Kopf-Link“ enthält.

Innerhalb dieses Elements steht das Element <div class=“menubody“ id=“menubody1“>. Es bildet den eigentlichen Menükörper, der bei Mausberührung von menuhead1 erscheinen soll.

Die CSS-Klasse div.menubody muss die Eigenschaft visibility: hidden erhalten.

Wenn für die Sichtbarkeit bei Mausberührung ist Javascript eingesetzt wird, dient bei Nichtverfügbarkeit von Javascript der Bereich <noscript> ... </noscript> als Fall-Back. Er wird nur bei Nichtverfügbarkeit von Javascript dargestellt. Setzen Sie dazu den Schalter -noscriptarea 1.

Falls der Schalter -noscriptarea 0 gegeben wurde, entfällt der Bereich <noscript> ... </noscript>. Das kann Sinn machen, wenn Sie auf eine reine CSS-Lösung setzen, oder wenn Sie als Fall-Back zusätzlich z. B. die Steuersequenz linklist verwenden.

© Wolf Busch | Home | Inhalt | A-Z