Java Menue | lima-city

Dieses Script ist von Giga.de entnommen und von mir umgearbeitet worden,
damit ihr das auch auf euer Homepage anwenden könnt.

<->Weiter unten ist der komplette QUellcode ohne die ganzen Kommentare<->

Zuersteinmal, die variabeln die wir benutzen:

Code:
var breite; //Wird benötigt um die entfernung zum linken Rand abzuspeicher.
var aktiv; //Wird für einen Timer benutzt (später mehr).
var pwidth; //Das ist die Breite des jeweilegen Menues,
//wäre zu doof wenn man Das immer angeben muss...
var weiter; //Hier wird der Name des Jeweiligen Menues gespeichert.
var menueaktiv; //Wird für einen Timer benutzt (später mehr).
var number_layers = 5;//Muss angegeben werden damit function hidealllayer() funzt.

Nun erklär ich die Funktion "hidealllayer();":

Code:

function hidealllayer() //Die Initialisierung von der Funktion hidealllayer()
{ //Klammer :P
for(i = 1; i <= number_layers; i++)
{
/* Kommentar
Die for-Schleife laüft so lange bis alle Ebenen Versteckt wurden.
-> Dazu dient die Variable " number_layers " <-
*/

document.getElementById("menue"+i).style.visibility="hidden";

/* Kommentar
Dies wird Verwendet um jedes menue an zu sprechen,
z.B.: "menue + 1" = "menue1" = "mach menue1 unsichtbar" usw.
*/
}
} //Klammer :)

/---------------------------------------------------------

So jetzt zum Grundlegendem, sozusagen dem Kern des ganzen:

Damit ihr hier die übersicht nicht Verliert
und ich auch nicht habe ich den Quellcode nummerriert und unten erklärt.

Code:

function show_layer(x, time) // (a)
{
hidealllayer(); // (b)
weiter=x; // (c)
delay = time; // (d)
menueaktiv=window.setTimeout("show_layer_start()",delay); // (e)
}

//-----------------------------------------------------------------

function show_layer_start() // (1)
{
if(document.getElementById) // (2)
{
hidealllayer(); // (3)

off_left=document.getElementById("pos"+weiter).offsetLeft; // (4)
parenttag=document.getElementById("pos"+weiter).offsetParent; // (5)
pwidth=document.getElementById("width"+weiter).width * 1.02; // (6)

do
{
off_left=off_left+parenttag.offsetLeft; // (7)
parenttag=parenttag.offsetParent; // (8)
}
while(parenttag.tagName != 'BODY'); // (9)

if(weiter=="menue1") // (10)
{
breite = off_left+5; // (11)
}
else
{
breite = off_left; // (12)
}

if(pwidth <= 60) // (13)
{
pwidth = 80; // (14)
}

document.getElementById(weiter).style.left=breite+"px"; // (15)
document.getElementById(weiter).style.visibility="visible"; // (16)
document.getElementById(weiter).style.width=pwidth+"px"; // (17)
}
}

/Erläuterung-----------------------

(a) Die Funktion show_layer(x, time) wird aufgerufen mit den Parametern die wir beim Aufruf übergeben.
(b) Die Funktion hidealllayer() wird aufgerufen um alle Menues zu schliessen bevor ein neues aufgeht.
(c) In die Variable "weiter" wird der Name den wir in "x" übergeben haben gespeichert.
(d) "menueaktiv" wird mit einem Timer versehen der in "delay"ms aktiviert wird.Delay wird auch übergeben.

(1) Funktion show_layer_start wurde von show_layer aufgerufen.
(2) Es wird geprüft ob das Document "getElementById" unterstützt.
(3) Es wird nochmals , zur Sicherheit "hidealllayer()" aufgerufen,
(4) Mit "offsetLeft" erhalten wir den abstand zur Linken seite "pos"+weiter beduetet das wir von dem Element
mit der ID posmenue1 oder posmenue2, usw. diesen Besgaten abstand haben wollen, der Wert wird in off-left gespeichert.
(5) offsetParent speichert dasjenige Elternelement eines Elements,
von dessen Positionierung die Positionierung des Elements abhängt.
offsetParent ist dabei eine Art Zeiger auf das übergeordnete Element.
Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des all-Objekts notieren.
Diese gelten dann für das Element, auf das der Zeiger zeigt.
Existiert kein Offset-Elternelement so hat die Eigenschaft offsetParent den Wert null.
(6) Hier berechnen wir wie Breit das jeweilige Menue sein soll.
(10) In meinem Fall musste ich um das gut aussehen zu lassen die Breite etwas abändern falls ihr die entfernung
von Links verändern müsst ...
(11) Hier wird die entfernung von links um 5 Px erweitert
(12) Ansonsten soll der Wert einfach in "breite" abgespeichert werden.
(13) wenn die Breite eines Menues sogar zu klein ist siehts natürlich sry"scheisse" aus, deswegen wird geprüft
ob es breiter als 60 Px ist.
(14) Hier wird dir Breite einfach auf 80 Px gesetzt.
(15) Hier übergeben wir dem aktuellen Menue die entfernung von Links.
(16) Hier machen wir das aktuelle Menue Sichtbar.
(17) Hier wird die Breite des aktuellen Menue eingestellt, falls ihr ein Design habt wo sich die groesse ändert
eines Bereichs wo ein Menue auftauchen soll wird das immer aktualisiert.
/----------------------------------

Zum Schluss noch etwas einfaches:

Code:
function menuOut(s) // diese Funktion wird immer extern aufgerufen ... z.B. bei Mouseout u. Mouseover
{
if(s==0){ //wenn der Parameter "s" 0 ist wird der Timer für das ausblenden aller ebenen gestartet.
aktiv=window.setTimeout("hidealllayer()",500);
}

if(s==1){//wenn "s" 1 ist wird der eben erstellte Timer wieder
//aufgelöst damit sich das Menue doch net schliest
window.clearTimeout(aktiv);
}

if(s==2){//wenn "s" 2 ist wird der Timer für das öffnen des Menues aufgelöst.
window.clearTimeout(menueaktiv);
}

//Hoffe das war net zu kompliziert :P

}

/----------------------------------

So hier gibts den Kompletten Quelltext:

Code:
<html>
<head>
<script language="JavaScript">
<!--
var breite;
var aktiv;
var pwidth;
var weiter;
var menueaktiv;
var number_layers = 1;

function hidealllayer(){
for(i = 1; i <= number_layers; i++)
document.getElementById("menue"+i).style.visibility="hidden";
}

function show_layer(x, time) {
hidealllayer();
weiter=x;
delay = time;
menueaktiv=window.setTimeout("show_layer_start()",delay);
}

function show_layer_start() {
if(document.getElementById) {
hidealllayer();

off_left=document.getElementById("pos"+weiter).offsetLeft;
parenttag=document.getElementById("pos"+weiter).offsetParent;
pwidth=document.getElementById("width"+weiter).width * 1.02;

do
{
off_left=off_left+parenttag.offsetLeft;
parenttag=parenttag.offsetParent;
}
while(parenttag.tagName != 'BODY');

if(weiter=="menue1")
{
breite = off_left+5;
}
else
{
breite = off_left;
}

if(pwidth <= 60)
{
pwidth = 80;
}

document.getElementById(weiter).style.left=breite+"px";
document.getElementById(weiter).style.visibility="visible";
document.getElementById(weiter).style.width=pwidth+"px";

}
}

function menuOut(s)
{
if(s==0){
aktiv=window.setTimeout("hidealllayer()",500);
}

if(s==1){
window.clearTimeout(aktiv);
}

if(s==2){
window.clearTimeout(menueaktiv);
}

}

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

<body>

<table>

<tr>
<td width="150px" id="widthmenue1">
<a id="close_link">
<span id="posmenue1" name="posmenue1" onMouseOver="show_layer('menue1', 350); menuOut(1)" onMouseOut="menuOut(2)" onClick="menuOut(2); menuOut(1); show_layer('menue1', 1)" >
hier rüber gehen ... höhe muss manuel eingestellt werden oder kann selbst ins Javascript eingeproggt werden ...
</span>
</a>
</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td onmouseover="menuOut(1)" onmouseout="menuOut(0)">
<table width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="20" align="center" id="top_open_menue" style="border-top-width: 1px;border-top-style: solid;border-top-color: black;">
<a href="#">» Neues</a>
</td>
</tr>
<tr>
<td height="20" align="center" id="top_open_menue">
<a href="#">» Altes</a>
</td>
</tr>
<tr>
<td height="20" align="center" id="top_open_menue">
<a href="#">» Statistik</a>
</td>
</tr>
<tr>
<td align="right">
<a href="#" onClick="hidealllayer()" id="close_link" ><span style="font-size:7pt;">Close X</span></a>
</td>
</tr>
</table>

</td>
</tr>
</table>

</div>

</body>
</html>

Hoffe es war net zu anstrengend zu lesen und ihr könnt damit was anfangen, viel spass damit!