Problem mit Javascript Navigationsmenü

ElNino24 · 15 Mai 2009

Hallo!

Ich habe mir mithilfe von Javascript ein Navigationsmenü programmiert,
das folgendermaßen aussieht:

---------
Button1 |
--------
Unterpunkt1
Unterpunkt2
Unterpunkt3
---------
Button2 |
---------
Unterpunkt1
Unterpunkt2
Unterpunkt3
.
.
.
usw...

wenn ich die Seite lokal aufrufe, funktioniert alles wunderbar. Aber jedesmal, wenn ich die Seite ins Internet hochlade und im Internet ansehen will, öffnen sich für kurze Zeit alle Buttons mit allen Unterpunkten. Das soll aber nicht so sein. Ich hätte gerne, dass am Anfang KEINE Unterpunkte sichtbar sind, nur die Buttons... Wie mache ich das?

_Thor_ · 15 Mai 2009

Lass mich mal in meine Glaskugel schauen... nein, bleibt dunkel.

Ohne Quellcode wird das etwas schwierig.

Zeig mal, was du hast, dann können wir dir auch helfen.

Erster Schritt der Fehlersuche ist die Fehlerkonsole (Firefox: Extras -> Fehlerkonsole)

Zu beachten ist bei Javascript Menüs allerdings, dass sie nicht funktionieren, wenn der Besucher Javascript deaktiviert hat. Dann kann er auf deiner Seite nicht navigieren. Ein CSS-Menü wäre da deutlich besser.

ElNino24 · 15 Mai 2009

Ja ich poste dir mal hier den Quelltext...

Es sieht so aus als ob der das nur macht wenn er das dass erste Mal lädt, danach taucht dieser Fehler nicht mehr auf, nehme mal an weil es danach im Cache ist...

Hier der Quelltext:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testseite</title>

<!--Verweis auf das externe Stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">

function makeinvis()
{
    document.getElementById("Container1").style.display="none";
    document.getElementById("Container2").style.display="none";
    document.getElementById("Container3").style.display="none";
    document.getElementById("Container4").style.display="none";
    document.getElementById("Container5").style.display="none";
}

function hideLayer1()
{
    
    if(document.getElementById("Container1").style.display=="none")
{
document.getElementById("Container1").style.display = "inline";
document.getElementById("Container2").style.display = "none";
document.getElementById("Container3").style.display = "none";
document.getElementById("Container4").style.display = "none";
document.getElementById("Container5").style.display ="none";
}
    
    else if(document.getElementById("Container1").style.display!="none")
    {
        document.getElementById("Container1").style.display = "none";
    }


}

function hideLayer2()
{
    if(document.getElementById("Container2").style.display=="none")
    {
        document.getElementById("Container2").style.display="inline";
        document.getElementById("Container1").style.display = "none";
        document.getElementById("Container3").style.display = "none";
        document.getElementById("Container4").style.display = "none";
        document.getElementById("Container5").style.display = "none";
    }
    
    else if(document.getElementById("Container2").style.display!="none")
    {
        document.getElementById("Container2").style.display="none";
    }
        
}

function hideLayer3()
{
    if(document.getElementById("Container3").style.display=="none")
    {
        document.getElementById("Container3").style.display="inline";
        document.getElementById("Container1").style.display = "none";
        document.getElementById("Container2").style.display = "none";
        document.getElementById("Container4").style.display = "none";
        document.getElementById("Container5").style.display = "none";
    }
    
    else if(document.getElementById("Container3").style.display!="none")
    {
        document.getElementById("Container3").style.display="none";
    }
}

function hideLayer4()
{
    if(document.getElementById("Container4").style.display=="none")
    {
        document.getElementById("Container4").style.display="inline";
        document.getElementById("Container1").style.display = "none";
        document.getElementById("Container2").style.display = "none";
        document.getElementById("Container3").style.display = "none";
        document.getElementById("Container5").style.display = "none";
    }
    
    else if(document.getElementById("Container4").style.display!="none")
    {
        document.getElementById("Container4").style.display="none";
    }
}

function hideLayer5()
{
    if(document.getElementById("Container5").style.display=="none")
    {
        document.getElementById("Container5").style.display="inline";
        document.getElementById("Container1").style.display = "none";
        document.getElementById("Container2").style.display = "none";
        document.getElementById("Container3").style.display = "none";
    }
    
    else if(document.getElementById("Container5").style.display!="none")
    {
        document.getElementById("Container5").style.display="none";
    }
}

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

<body bgcolor="#666666" marginwidth="0" marginheight="0" topmargin=
"0" leftmargin="0" onLoad="javascript:makeinvis()";>
<table width="1078" border="0" align="center" bgcolor="#FFFFFF"
cellpadding="0" cellspacing="0">
  <tr>
<td width="1078" align="right" class="tabellenhintergrund">
<p><font face="Arial" size="2"><img src="logo.jpg" hspace="9" alt="#########"><img src=
"banner2.jpg" alt="#########"></font><br></p>

<!--Start horizontale Navigation-->
<div align="center">
<a href="index.html" onMouseOver="document.getElementById('buttonpic').src='nav_buttons/home_2.jpg';"
onmouseout="document.getElementById('buttonpic').src='nav_buttons/home.jpg';">
<img src="nav_buttons/home.jpg" alt="" id="buttonpic" border="0"></a>
<a href="unternehmen.html" onMouseOver="document.getElementById('buttonpic1').src='nav_buttons/unternehmen_2.jpg';"
onmouseout="document.getElementById('buttonpic1').src='nav_buttons/unternehmen.jpg';">
<img src="nav_buttons/unternehmen.jpg" alt="" id="buttonpic1" border="0"></a>
<img src="nav_buttons/produkte_2.jpg" alt="" id="buttonpic2" border="0">
<a href="kontakt.html" onMouseOver="document.getElementById('buttonpic3').src='nav_buttons/kontakt_2.jpg';"
onmouseout="document.getElementById('buttonpic3').src='nav_buttons/kontakt.jpg';">
<img src="nav_buttons/kontakt.jpg" alt="" id="buttonpic3" border="0"></a></div>
<!--Ende horizontale Navigation-->


</td>
</tr>
<tr>
<td>
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="166" valign="top" class="tabellenhintergrund2">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left"><br>
<br>
<a href="javascript:hideLayer1()">
<img src="nav_buttons/swm.jpg" border="0"></a><br>

<div id="Container1"><a href="produkte/schweissmaschinen/automatent.html"><img src="nav_buttons/amt_test.jpg" border="0"></a><br>
<a href="produkte/schweissmaschinen/lnspannbank.html"><img src="nav_buttons/lnsp_test.jpg" border="0"></a><br>
<a href="produkte/schweissmaschinen/rundnaht.html"><img src="nav_buttons/rn.jpg" border="0"></a><br>
<a href="produkte/schweissmaschinen/tsanlage.html"><img src="nav_buttons/tsa.jpg" border="0"></a><br>
<a href="produkte/schweissmaschinen/supporte.html"><img src="nav_buttons/supp.jpg" border="0"></a><br>
<a href="produkte/schweissmaschinen/kreuzschlitten.html"><img src="nav_buttons/ks.jpg" border="0"></a><br></div>

<a href="javascript:hideLayer5()">
<img src="nav_buttons/swz.jpg" border="0"></a><br>

<div id="Container5">
<a href="produkte/schweisswerkzeuge/punkts.html"><img src="nav_buttons/ps.jpg" border="0"></a><br>
<a href="produkte/schweisswerkzeuge/buckels.html"><img src="nav_buttons/bs.jpg" border="0"></a><br>
<a href="produkte/schweisswerkzeuge/roboters.html"><img src="nav_buttons/rs.jpg" border="0"></a><br>
</div>

<a href="javascript:hideLayer2()">
<img src="nav_buttons/fdt.jpg" border="0"></a><br>

<div id="Container2">
<a href="produkte/foerdertechnik/kettenb.html"><img src="nav_buttons/kb.jpg" border="0"></a><br>
<a href="produkte/foerdertechnik/rollenb.html"><img src="nav_buttons/rb.jpg" border="0"></a><br>
<a href="produkte/foerdertechnik/regalbdg.html"><img src="nav_buttons/rbg.jpg" border="0"></a><br>
<a href="produkte/foerdertechnik/stapelp.html"><img src="nav_buttons/sp.jpg" border="0"></a><br>
</div>

<a href="javascript:hideLayer3()">
<img src="nav_buttons/hht.jpg" border="0"></a><br>

<div id="Container3">
<a href="produkte/handling/montanl.html"><img src="nav_buttons/ma.jpg" border="0"></a><br>
<a href="produkte/handling/stapelanl.html"><img src="nav_buttons/sa.jpg" border="0"></a><br></div>

<a href="javascript:hideLayer4()">
<img src="nav_buttons/pa.jpg" border="0"></a><br>

<div id="Container4">
<a href="produkte/produktionsanlagen/trfert.html"><img src="nav_buttons/tf.jpg" border="0"></a><br>
<a href="produkte/produktionsanlagen/sbmfert.html"><img src="nav_buttons/smf.jpg" border="0"></a><br></div>

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

<td align="left">
<table cellpadding="18">
<tr>
<td><div id="Test"><font face="Arial" size="2"><br>
  Dieser vorliegende Text soll nichts darstellen. Er dient
  lediglich zum Üben mit Word, und kann daher beliebig - wie in den
  Übungen beschrieben - verändert werden. Und damit genügend Text für
  die Übungen zur Verfügung steht, wird diese kurze Einleitung
  mehrfach wiederholt.
  <p>Hinweis: Dies ist nur ein sinnloser Text, der zum Üben
geschrieben wurde. Er beinhaltet daher keine wertvollen
Informationen!</p>
<p>Dieser vorliegende Text soll nichts darstellen. Er dient
lediglich zum Üben mit Word, und kann daher beliebig - wie in den
Übungen beschrieben - verändert werden. Und damit genügend Text für
die Übungen zur Verfügung steht, wird diese kurze Einleitung
mehrfach wiederholt.</p>
<p>Dies sind sinnlose Aufzählungen.</p>
<p>Dies sind sinnlose Aufzählungen.</p>
<p>Dies sind sinnlose Aufzählungen.</p>
<p>Dies sind sinnlose Aufzählungen.<br>
Was ist das nichts?</p>

<p>Dieser vorliegende Text soll nichts darstellen. Er dient
lediglich zum Üben mit Word, und kann daher beliebig - wie in den
Übungen beschrieben - verändert werden. Und damit genügend Text für
die Übungen zur Verfügung steht, wird diese kurze Einleitung
mehrfach wiederholt.</p>
<p>Hinweis: Dies ist nur ein sinnloser Text, der zum Üben
geschrieben wurde. Er beinhaltet daher keine wertvollen
Informationen!</p>
<p>Dieser vorliegende Text soll nichts darstellen. Er dient
lediglich zum Üben mit Word, und kann daher beliebig - wie in den
Übungen beschrieben - verändert werden. Und damit genügend Text für
die Übungen zur Verfügung steht, wird diese kurze Einleitung
mehrfach wiederholt.</p><br></font></div>


<table bgcolor="#666666"><tr><td width="800" align="center"><font face="Arial" size="1" color="#CCCCCC"><a href="index.html">Home</a> . <a href="impressum.html">Impressum</a> . <a href="javascript:window.print();">Seite ausdrucken</a></font></td></tr></table>
</td>

</tr>
</table>
</td>
</tr>
</table>
</td>
<tr>
</tr>
</tr>
</table>
&nbsp;
<br>
</body>
</html>

Efchen · 15 Mai 2009

Und der entscheidende Rest?
Das sind doch nur Funktionen, aber kein Aufruf. Außerdem fehlt der Initialzustand (HTML/CSS).

Am besten ist immer ein Link zur Seite, da kann man auch gleich alles besser nachvollziehen und diverse Developer-Tools verwenden.

ElNino24 · 15 Mai 2009

Entscheidender Rest? Also das ist die komplette Seite!

Hab jetzt schon versucht die ganzen Grafiken des Navigationsmenüs mittels preloader vorzuladen, aber auch DAS bringt nichts...
Jedesmal wird das Navmenü beim öffnen einer Seite kurz komplett inklusive aller Unterpunkte ausgeklappt...
Das geht erst weg wenn man alle Seiten einmal geöffnet hat d.h. sie alle im Browsercache sind... WARUM DENN NUR :-(

Efchen · 15 Mai 2009

Hmmm..entschuldige, bei mir hat er das vorhin nicht alles angezeigt, da bin ich mir sicher.
Aber Du hast wohl recht.

Benutze aber doch bitte[1] statt des [*HTML]-Tags das [*code]-Tag (ohne Sternchen), ersteres hat ein Problem bei der Formatierung der Anzeige.

[1] und ändere es oben im Beitrag gleich ab.

P.S.: EIn Link wäre trotzdem besser.

Problem mit Javascript Navigationsmenü

ElNino24

Neues Mitglied

_Thor_

Aktives Mitglied

ElNino24

Neues Mitglied

Efchen

Guest

ElNino24

Neues Mitglied

Efchen

Guest

Neueste Beiträge