nicht angemeldet
Dynamische Menues
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
-
ehm haste schon hier geschaut hier werden auch Untermenüs angesprochen http://dhtml.seite.net/beispiele/7.html.
mfg Torsche