Wayne: Dynamische Menues

Beitrag lesen

Hallo zusammen,

zur Gestaltung meiner Web-Seite habe ich bisher ein dynamisches Menue im Explorer-Stil
verwendet.
Nun soll erstmals ein Untermenue eingefuegt werden ... Tja, und hier knabber ich
seit mehreren Tagen dran rum.

Hier ein knappes Beispiel:
---------- obacht -------------
<html>
  <head>

<style type="text/css">

<!--
    #Punkt1Offen {
      position: absolute;
      height: 60px;
      visibility: hidden;
      z-index: 2;
    }

#Punkt1Zu {
      position: absolute;
      height: 20px;
      visibility: hidden;
      z-index: 1;
    }

#Punkt2Offen {
      position: absolute;
      height: 60px;
      visibility: hidden;
      z-index: 2;
    }

#Punkt2Zu {
      position: absolute;
      height: 20px;
      visibility: hidden;
      z-index: 1;
    }

//-->
  </style>

<script>
  <!-- Verstecken für ältere Browser

//
    // Hier stecken die Ebenen
    //
    ebenen = document.all;
    if (! ebenen)
        ebenen = document;

function Plazieren (was, x, y) {

//
      // Diese Funktion plaziert einen Menüeintrag
      // an den angegebenen x- und y- Koordinaten
      //
      if (was) {

if (was.style) {

was.style.top  = y;
          was.style.left = x;
        }

if (was.pageX) {

was.pageY = y;
          was.pageX = x;
        }
      }
    }

function HoeheVon (was) {

//
      // Diese Funktion berechnet die Höhe eines
      // Menüeintrags, d.h. die Höhe des betreffenden
      // StyleSheets wird zurückgeliefert.
      //
      if (was) {

if (was.style) {

//
          // Die Höhe ist normalerweise ein String,
          // der aus der Höhe in Pixeln und dem
          // Zusatz "px" besteht, also z.B. "20px".
          // Damit wir damit nachher rechnen können
          // wird dieser String mit der parseInt ()
          // Funktion in eine Zahl konvertiert.
          //
          return parseInt (was.style.height);
        }

if (was.pageX) {

return parseInt (was.height);
        }
      }
    }

function EinAusschalten (was, hoehe) {

//
      // Diese Funktion dient zum Ein- und Ausschalten
      // von Menüeinträgen, indem die Höhe des betreffenden
      // StyleSheets gesetzt wird.
      // Ist die gewünscht Höhe größer als 0, dann gilt
      // der Eintrag als sichtbar sonst als unsichtbar. Auch
      // dies wird in den entsprechenden StyleSheet
      // eingetragen
      //
      if (was) {

if (was.style) {

if (hoehe > 0)
            was.style.visibility = "visible";
          else
            was.style.visibility = "hidden";

was.style.height = hoehe;
        }
        if (was.pageX) {

if (hoehe > 0)
            was.visibility = "visible";
          else
            was.visibility = "hidden";

was.height = hoehe;
        }
      }
    }

function VertikalAusrichten () {

//
      // Diese Funktion ordnet die einzelnen Menüeinträge
      // untereinander an. Der erste Menüeintrag, d.h. die
      // beiden Styles, die zu ihm gehören erscheinen bei
      // der horizontalen Koordinate y = 50.
      //
      y = 50;
      x = 5;
      Plazieren (ebenen.Punkt1Offen, x, y);
      Plazieren (ebenen.Punkt1Zu, x, y);

//
      // Der zweite Menüeintrag erscheint darunter, d.h.
      // diese beiden Styles werden um die Höhe der darüber
      // liegenden nach unten verschoben
      //
      y += HoeheVon (ebenen.Punkt1Offen);
      y += HoeheVon (ebenen.Punkt1Zu);
      Plazieren (ebenen.Punkt2Zu, x, y);
      Plazieren (ebenen.Punkt2Offen, x, y);
  }

function AlleZu () {

//
      // Diese Funktion klappt alle Menüs zu, d.h. die
      // Styles werden entsprechen ein- und ausgeschaltet
      //
      EinAusschalten (ebenen.Punkt1Zu, 20);
      EinAusschalten (ebenen.Punkt2Zu, 20);

EinAusschalten (ebenen.Punkt1Offen, 0);
      EinAusschalten (ebenen.Punkt2Offen, 0);
    }
  // -- Rest nicht mehr verstecken -->
  </script>
  </head>

<body onLoad="AlleZu ();
          VertikalAusrichten ();" body bgcolor="#FFFFFF">

<div id="Punkt1Offen">
    <font face="arial">
    <a href="" onClick="AlleZu(); EinAusschalten(ebenen.Punkt1Zu, 20);
      VertikalAusrichten ();
      return false;"><b><i>Punkt1</b></i></a>
      <br>

<!--
    Tja, und hier sollte das Untermenue (ebenfalls zum Ausklappen) rein...
    //-->
    <a href="leer.htm"> Unterpunkt1_1</a><br>
    <a href="leer.htm"> Unterpunkt1_2</a><br>
    </font>
  </div>

<div id="Punkt1Zu">
    <font face="arial">
    <a href="" onClick="AlleZu(); EinAusschalten(ebenen.Punkt1Offen, 40);
      VertikalAusrichten ();
      return false;"><b><i>Punkt1</b></i></a>
    <br>
    </font>
  </div>

<div id="Punkt2Offen">
    <font face="arial">
    <a href="" onClick="AlleZu(); EinAusschalten(ebenen.Punkt2Zu, 20);
      VertikalAusrichten ();
      return false;"><b><i>Punkt2</b></i></a>
    <br>

<a href="leer.htm"> Punkt2_1</a><br>
    <a href="leer.htm"> Punkt2_2</a><br>
    </font>
  </div>

<div id="Punkt2Zu">
    <font face="arial">
    <a href="" onClick="AlleZu(); EinAusschalten(ebenen.Punkt2Offen, 40);
      VertikalAusrichten ();
      return false;"><b><i>Punkt2</b></i></a>
    <br>
    </font>
  </div>
</body>
</html>

---------- jau, das war's -----

Leider gelingt es mir nicht, im Menue1 ein Untermenue mit aehnlicher Funktionalitaet unterzubringen.
Bin fuer jeden Hinweis dankbar ...

Wayne