Supportnet Computer
Planet of Tech

Supportnet / Forum / Skripte(PHP,ASP,Perl...)

Probleme mit JavaScript-Menü





Frage

Hi, ich habe im Internet ein JavaScript-Menü gefunden, dass in etwa so funktioniert wie ich es möchte - aber leider nicht so ganz .... 1. Wenn bei dem Menü der Hauptpunkt angeklickt wird, so öffnet sich ein Untermenü ... Ich möchte aber, dass sich beim anklicken des Hauptpunktes eine andere Seite öffnet, auf der das Untermenü geöffnet ist. 2. Wird ein weiterer Hauptpunkt angeklickt, so bleibt der zuvor geöffnete auch offen ... Ich möchte aber, dass sich der zuvor angeklickte Hauptpunkt wieder schließt! 3. Im IE rutscht der Text im Inhalt nach rechts wenn Unterpunkte aufgeklappt werden (sobald die Unterpunkte die flexible Länge des Menüs überschreiten) Liegt das am JavaSript oder am CSS??? 4. Wie kann ich erreichen, dass der IE "min-height" umsetzt??? Opera und FF stellen korrekt dar (das Menü soll eine Hindeshöhe haben, da die komplette Menü-Spalte einen dunkelblauen Hintergrund haben soll! Viele Fragen, und die Hoffnung, dass mir jemand helfen kann!! Die Testseite ist zu finden unter: [url]http://www.p-henning.de/Z_VORLAGE_TEST_neu.html[/url] Gruss - Petra

Antwort 1 von rfb

da sind schon wieder ein paar Sächelchen, die das HTML nicht validieren lassen ;-)

Zur Frage: wenn du das
return false
aus den onclick-Eventhandlern löscht oder durch
return true
ersetzt wird der Link ausgeführt.

Du müsstest noch eine zusätzliche Funktion schreiben, die die Seitenadresse abfragt, das Menü durchgeht und bei Übereinstimmung das Untermenü ausklappt.

IE bis 6 kennt min-width/height nicht. Ich weiß nicht wie es bei IE7 ist.

Antwort 2 von rfb

ach so zum Problem Auto-Zuklappen.

Schreib eine Funktion, die ein Array mit allen IDs enthält, geh durch das Array und ruf die switchlayer-Funktion auf - dann ist alles zu.
Sinnvoler als dies per CSS von Anfang an festzulegen ist es auch diese Funktion mittels onload-Eventhandler nach dem Laden auszuführen.

Sonst bekommen JavaScript-lose Menschen die Untermenüs nie zu Gesicht.

switchlayer könntest du übrigens verkürzen auf

function switchlayer(Layer_Name)
{
var wo = document.getElementById(Layer_Name) ;
if (wo)  {
wo.style.display=
 (wo.style.display!="none") ?  "none" : "block" ;
} }


Die ganzen Browserabfragen stammen noch aus der Zeit von Netscape und IE 4 (Mitte 90er), und sind indessen überflüssig.

Antwort 3 von Petra65

Meine Güte - womit kennst Du dich eigentlich aus (möchte ich mir gerne mal ´ne Schnitte von abschneiden!!)

Zitat:
da sind schon wieder ein paar Sächelchen, die das HTML nicht validieren lassen ;-)


--> .... ööö - ich weiss ;-) habe den Code soeben bereinigt, es werden nur noch die ul´s im Menü angemeckert !!

Zitat:
Du müsstest noch eine zusätzliche Funktion schreiben, die die Seitenadresse abfragt, das Menü durchgeht und bei Übereinstimmung das Untermenü ausklappt

--> uppss - und wie??
if Seitenadresse == aktuelleAdresse
dann zeige UnterMenü ???

Kenne mich leider mit JavaScript überhaupt nicht aus.
Habe den Code im Internet gefunden ...

Zitat:
Zur Frage: wenn du das return false aus den onclick-Eventhandlern löscht oder durch return true ersetzt wird der Link ausgeführt.

--> Dann wird aber das Untermenü nicht mehr angezeigt !! (Würde aber wohl mit dem Schreiben der o.g. Funktion funktionieren?)


Gruss - Petra

Antwort 4 von rfb

Zitat:
möchte ich mir gerne mal ´ne Schnitte von abschneiden
sagt mein Freund der Chirurg auch immer...

Zitat:
if Seitenadresse == aktuelleAdresse
dann zeige UnterMenü ???
im Prinzip schon.

aktuelle Adresse ist location.href

über this.getAttribute("href") erhältst du in der Funktion die Zieladresse des Links.

Einfacher vergleich geht nicht, da location.href noch das Protokoll und die Domain enthält. aber
if (location.href.indexOf(this.getAttribute("href"))>-1) 
liefert den gewünschten Vergleich (Abfrage: ist die Zieladresse Bestandteil der Zeichenkette aus der aktuellen URL?)

Wenn ich Zeit habe (frühestens heut abend) kann ich ja mal schauen ob ich daraus was zusammenscripte.

Antwort 5 von Petra65

... das wäre aber super, super lieb :-)

Danke

Viele Grüße

Petra

Antwort 6 von rfb

das versprochene JavaScript:

<script type="text/javascript">
function schliesse_alles() {
var unterpunkt=["ueberUns","pragmatik","kernKompetenz","untersuchungsTypen","erreichbarkeit","impressum"];
for (var j=0;j<unterpunkt.length;j++) {
switchlayer(unterpunkt[j],false)
}}

function switchlayer(Layer_Name) {
var wo=document.getElementById(Layer_Name);
if (wo) {
if (switchlayer.arguments.length>1) zustand=switchlayer.arguments[1];
else zustand=(wo.style.display!="block");
wo.style.display=(zustand) ? "block":"none";
}}

function wobinich() {
var wo=location.href;
var menue=document.getElementById("menue").getElementsByTagName("a");
var eidi="";
for (var j=0;j<menue.length && eidi=="";j++){
var ziel=menue[j].getAttribute("href");
if (ziel.length>4 && wo.indexOf(ziel)>-1) {
var z=ziel.split(".");
eidi=z[0];
switchlayer(eidi,true);
}}}

window.onload=function () {
schliesse_alles();
wobinich();
}
</script>


das angepasste Menü (beachte die Reihenfolge ul - li - ul ... /ul - /li ... - /ul):

      <div id="menue">
        <ul>
          <li style="list-style-type:none">
            <a href="ueberUns.html" onclick="javascript:switchlayer(´ueberUns´);return false;">&Uuml;ber uns</a>
            <ul id="ueberUns">
              <li><a href="ueberUns1.html">Wir &uuml;ber uns</a></li>
              <li><a href="ueberUns2.html">Unsere Kunden &uuml;ber uns</a></li>
            </ul>
         </li>

...
          <li style="list-style-type:none">
            <a href="kernKompetenz.html" onclick="javascript:switchlayer(´kernKompetenz´);return false;">Kern-Kompetenz</a>
            <ul id="kernKompetenz">
              <li><a href="kernKompetenz1.html">Untersuchungs-/Beratungsanlage</a></li>
              <li><a href="kernKompetenz2.html">z.B. Weibl. Marken-Typen</a></li>
              <li><a href="kernKompetenz3.html">z.B. M&auml;nnl. Marken-Typen</a></li>
              <li><a href="kernKompetenz4.html">3 Ebenen</a></li>
              <li><a href="kernKompetenz5.html">Individual-Diagnostik</a></li>
              <li><a href="kernKompetenz6.html">Messmethoden</a></li>
            </ul>
         </li>

...
              <li><a href="untersuchungsTypen2.html">Online-Befragungen</a></li>
              <li><a href="untersuchungsTypen3.html">Je nach Aufgabenstellung</a></li>
              <li><a href="untersuchungsTypen4.html">&Uuml;bergreifend</a></li>
              <li><a href="untersuchungsTypen5.html">Standardisierte Verfahren</a></li>
              <li><a href="untersuchungsTypen6.html">Auswertung &amp; Ergebnis-Darstellung</a></li>
            </ul>
         </li>

          <li style="list-style-type:none">
            <a href="erreichbarkeit.html" onclick="javascript:switchlayer(´erreichbarkeit´);return false;">Erreichbarkeit</a>
            <ul id="erreichbarkeit">
              <li><a href="erreichbarkeit1.html">Erreichbarkeit &amp; Verkehrsanbindung</a></li>
              <li><a href="erreichbarkeit2.html">Stadtplan 1</a></li>
              <li><a href="erreichbarkeit3.html">Stadtplan 2</a></li>
            </ul>
          </li>
          <li style="list-style-type:none">
            <a href="impressum.html" onclick="javascript:switchlayer(´impressum´);return false;">Impressum</a>
            <ul id="impressum">
              <li><a href="impressum1.html">Impressum</a></li>
              <li><a href="impressum2.html">Rechtshinweise</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /menue-->


Antwort 7 von rfb

eine Korrektur:

function switchlayer(Layer_Name) {
var wo=document.getElementById(Layer_Name);
if (wo) {
var zustand=(wo.style.display!="block");
if (switchlayer.arguments.length>1) zustand=switchlayer.arguments[1]; 
wo.style.display=(zustand) ? "block":"none";
}}


So bleibt die Variable
zustand
lokal (auf die Funktion beschränkt) und kann nicht andere Scripte stören, die vielleicht eine Variable gleichen Namens nutzen.

Antwort 8 von Petra65

Wow - sieht ja irre aus ...

Wie lange hast Du denn dafür gebraucht??? Da weiss ich ja gar nicht wie ich mich bedanken soll ;-.)

Aber leider tauchen bei mir 2 Probleme auf:

1. Bei der internen Vorschau (Phase 5) wird in jedem Block bei der Hauptüberschrift ein Fehler angezeigt
--> ungültiges Zeichen

<div id="menue">
<ul>
<li style="list-style-type:none;">
<a href="ueberUns.html" onclick="javascript:switchlayer(´ueberUns´);return false;">&Uuml;ber uns</a>

Es wird die Stelle vor dem <a als Fehler angegeben??!

Allerdings öffnen Opera, FF und der IE die Seite ohne Fehlermeldung!

2. Wenn ich auf den Hauptpunkt klicke öffnet sich eine Unterseite, auf dieser Unterseite soll aber das Untermenü zu sehen sein.

Ich habe übrigens von meinem Vater eine "Vorlage" erhalten wie die HP aussehen soll - in etwa wie die von: http://www.meinecke-rosengarten.de/

Dort ist zumindest Das Menü, das er haben will...

Viele Grüße

Petra

Antwort 9 von rfb

wenn du aus dem Supportnet was kopierst musst du alle ´ ersetzen durch die einfachen Anf.zeichen (neben dem Ä), das liegt an der Supportnetsoftware.

Die anderen Probleme - morgen abend frühestens.

Antwort 10 von Petra65

suppiiii .... funktioniert !!!!

sorry, aber ich habe es nicht gesehen ;-(


Vielen Dank ...

Antwort 11 von Petra65

Aktiviere diesen Beitrag, da der Code noch nicht optimal ist!!!

Problemstellung (aufklappendes Menü):

Wird Menüpunkt 1 angeklickt, so soll zu der betreffenden Seite gewechselt werden. Gleichzeitig soll sich das Untermenü des Punktes öffnen.

Wird Menüpunkt 2 angeklickt, so soll wieder zu der betreffenden Seite gewechselt werden, das Untermenü soll sich öffnen und Menüpunkt 1 muss geschlossen werden !!!!

Ist-Zustand:

Wird Menüpunkt 1 angeklickt, so öffnet sich die Seite - aber das Untermenü wird erst nach nochmaligem Klick angezeigt.

Wird Menüpunkt 2 angeklickt, so wird Punkt 1 nicht wieder geschlossen !!!

Ich möchte es so haben wie bei:
Menue


Hier der Link, so dass Ihr Euch das Verhalten ansehen könnt: So sieht es aus


Schonmal vielen Dank ...

Petra

Antwort 12 von rfb

Ersetze doch mal deine Startseite durch dies Konstrukt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Fichtler Wiegand Forschung &amp; Consultans GmbH * &Uuml;ber uns </title>

    <style type="text/css" media="screen">@import url("inhalt.css");</style>
    <style type="text/css" media="print">@import url("inhalt_print.css");</style>
    <meta name="author"             content="Petra Henning">
    <meta name="DC.Publisher"       content="Petra Henning">
    <meta name="DC.Date"            content="2006-12-31T08:00+01:00">
    <script type="text/javascript">
    function alle_aus() {
    var unter=document.getElementById("menue").getElementsByTagName("ul");
    for (var u=0;u<unter.length;u++) {
     if (unter.className.indexOf("untermenue")>-1) unter.style.display="none";
    }}

    function switchlayer(Layer_Name){
    alle_aus();
    var unter=document.getElementById(Layer_Name);
    if (unter) {
    unter.style.display=(unter.style.display=="block") ? 'none' : 'block';
    }}

window.onload=function () {
switchlayer('ueberUns');
}

    </script>

  </head>

  <body>

    <div id="header">
      <b>FICHTLER</b><img src="images/logo_fc.jpg" width="36" height="44" border="0" alt="Logo"><b>WIEGAND</b>
    </div><!-- /header-->

    <div id="line1"></div><!-- /linie-->

    <div id="menueBox">
      <div id="menue">
        <ul>
          <li style="list-style-type:none">
            <a href="ueberUns.html" onclick="javascript:switchlayer('ueberUns');return false;">&Uuml;ber uns</a>
          </li>
            <ul id="ueberUns" class="untermenue">
              <li><a href="ueberUns1.html">Wir &uuml;ber uns</a></li>
              <li><a href="ueberUns2.html">Unsere Kunden &uuml;ber uns</a></li>
            </ul>

          <li style="list-style-type:none">
            <a href="pragmatik.html" onclick="javascript:switchlayer('pragmatik');return false;">Pragmatik</a>
          </li>
            <ul id="pragmatik" class="untermenue">
              <li><a href="pragmatik1.html">Direkte Erreichbarkeit</a></li>
              <li><a href="pragmatik2.html">Erfahrungen in Forschung &amp; Beratung</a></li>
              <li><a href="pragmatik3.html">Erfahrungen in Branchen</a></li>
              <li><a href="pragmatik4.html">Healthcare, Pharmacie &amp; OTC</a></li>
              <li><a href="pragmatik5.html">Kundenliste</a></li>
            </ul>

          <li style="list-style-type:none">
            <a href="kernKompetenz.html" onclick="javascript:switchlayer('kernKompetenz');return false;">Kern-Kompetenz</a>
          </li>
            <ul id="kernKompetenz" class="untermenue">
              <li><a href="kernKompetenz1.html">Untersuchungs-/Beratungsanlage</a></li>
              <li><a href="kernKompetenz2.html">z.B. Weibl. Marken-Typen</a></li>
              <li><a href="kernKompetenz3.html">z.B. M&auml;nnl. Marken-Typen</a></li>
              <li><a href="kernKompetenz4.html">3 Ebenen</a></li>
              <li><a href="kernKompetenz5.html">Individual-Diagnostik</a></li>
              <li><a href="kernKompetenz6.html">Messmethoden</a></li>
            </ul>

          <li style="list-style-type:none">
            <a href="untersuchungsTypen.html" onclick="javascript:switchlayer('untersuchungsTypen');return false;">Untersuchungs-Typen</a>
          </li>
            <ul id="untersuchungsTypen" class="untermenue">
              <li><a href="untersuchungsTypen1.html">Befragungsmethoden</a></li>
              <li><a href="untersuchungsTypen2.html">Online-Befragungen</a></li>
              <li><a href="untersuchungsTypen3.html">Je nach Aufgabenstellung</a></li>
              <li><a href="untersuchungsTypen4.html">&Uuml;bergreifend</a></li>
              <li><a href="untersuchungsTypen5.html">Standardisierte Verfahren</a></li>
              <li><a href="untersuchungsTypen6.html">Auswertung &amp; Ergebnis-Darstellung</a></li>
            </ul>

          <li style="list-style-type:none">
            <a href="erreichbarkeit.html" onclick="javascript:switchlayer('erreichbarkeit');return false;">Erreichbarkeit</a>
          </li>
            <ul id="erreichbarkeit" class="untermenue">
              <li><a href="erreichbarkeit1.html">Erreichbarkeit &amp; Verkehrsanbindung</a></li>
              <li><a href="erreichbarkeit2.html">Stadtplan 1</a></li>
              <li><a href="erreichbarkeit3.html">Stadtplan 2</a></li>
            </ul>

          <li style="list-style-type:none">
            <a href="impressum.html" onclick="javascript:switchlayer('impressum');return false;">Impressum</a>
          </li>
            <ul id="impressum" class="untermenue">
              <li><a href="impressum1.html">Impressum</a></li>
              <li><a href="impressum2.html">Rechtshinweise</a></li>
            </ul>
        </ul>
      </div><!-- /menue-->
    </div><!-- /menueBox-->

    <div id="inhalt">
      <h1>&Uuml;ber uns</h1>

      <a href="ueberUns1.html">Wir &uuml;ber uns</a>
      <br>
      <a href="ueberUns2.html">Unsere Kunden &uuml;ber uns</a>



      <div id="inhaltMenue">
        <a href="index.html">[Home]</a>
        <a href="ueberUns.html">[&Uuml;ber uns]</a>
        <a href="pragmatik.html">[Pragmatik]</a>
        <a href="kernKompetenz.html">[Kern-Kompetenz]</a>
        <a href="untersuchungsTypen.html">[Untersuchungs-Typen]</a>
        <a href="erreichbarkeit.html">[Erreichbarkeit]</a>
        <a href="impressum.html">[Impressum]</a>
      </div><!-- /inahaltMenue-->
    </div><!-- /inhalt-->

    <div id="line2"></div><!-- /linie-->

    <div id="footer">
      <span class="r">
        <a href="#">&gt; 1</a>
      </span>
      <a href="http://www.fichtler-wiegand.de">http://www.fichtler-wiegand.de</a>
    </div><!-- /footer -->

  </body>
</html>


Auser den beiden HTML-Fehlern wurde folgendes geändert:
Die Funktion Switchlayer um unnötigen Code gekürzt (funktioniert in dieser Form genauso ;-)
Funktion alle_aus eingeführt, die alle Untermenüs schliesst, wird jetzt automatisch von switchlayer ausgeführt.
Die Unetrmenüs haben einen passenden Klassennamen, anhand dessen alle-aus sie identifizieren kann.
Beim Laden der Seite wird mittels window.onload switchlayer einmal ausgeführt, so dass das Untermenü der aktuellen Seite automatisch geöffnet wird.

Antwort 13 von rfb

ach herrje, da hat mir das Supportnet wieder reingepfuscht.

Im JavaScript-Teil wurden ein paar Zeichen in "Unterstreichung" umgewandelt.

So sollte es aber klappen:

<script type="text/javascript">
function alle_aus() {
var unter=document.getElementById("menue").getElementsByTagName("ul");
for (var j=0;j<unter.length;j++) {
if (unter[j].className.indexOf("untermenue")>-1) unter[j].style.display="none";
}}

function switchlayer(Layer_Name){
alle_aus();
var unter=document.getElementById(Layer_Name);
if (unter) {
unter.style.display=(unter.style.display=="block") ? 'none' : 'block';
}}

window.onload=function () {
switchlayer('ueberUns');
}

</script>

Antwort 14 von Petra65

Meine Güte bist Du klasse "drauf" ..... Sowas würde ich nie nie nie hinbekommen !!!!

Es funktioniert einfach super ..... , bis auf kleine Schönheitsfehler im FF und Opera - dort sind die Aufzählungspunkte zu weit links. Aber das bekomme ich selber hin ;-)

Vielen, vielen Dank ....


Trotzdem nochmal 'ne Frage:
Zitat:
Auser den beiden HTML-Fehlern wurde folgendes geändert:


Welche waren das?????

Meinst Du die Einbindung der Stylesheets??

<link rel="stylesheet" href="css/inhalt.css" media="screen"></link>
<link rel="stylesheet" href="css/inhalt_print.css" media="print">

Antwort 15 von rfb

das & in "Forschung & Consultans" muss maskiert werden (als &amp;) und du hattest versucht ein Link-Element zu schließen.

Die doppelte Stylesheet-Einbindung ist nur ein Schönheitsfehler. Allerdings wird mit der import-Methode alten Browsern das Stylesheet vorenthalten - und das ist gut so, denn die Hälfte der Anweisungen darin verstehen die nicht.

Antwort 16 von rfb

Übrigens: in deinem impressum findet sich der Landgericht-Hamburg-Unsinn:
Zitat:
Mit Urteil vom 12. Mai 1998 hat das Landgericht Hamburg entschieden, dass man durch die Ausbringung eines Links die Inhalte der gelinkten Seite ggf. mitzuverantworten hat.
Dies kann - so das LG - nur dadurch verhindert werden, dass man sich ausdrücklich von diesen Inhalten distanziert.

Das Urteil besagt eher das Gegenteil des hier behaupteten, ist aber sowieso nie in Kraft getreten. Mehr Infos darüber: Urteil des Landgericht Hamburg

Antwort 17 von Petra65

ahhaaaaaa . . . . . ..

Das mit dem Hamburger Urteil habe ich noch nicht gewußt - habe des Disclaimer von jemandem, der es wohl auch nicht weiss ....

Habe ihn rausgenommen ;-)


Die ganzen Umlaute ersetze ich immer ganz zum Schluß - war hier noch nicht geschehen ....


Vielen Dank und viele Grüße

Petra

Antwort 18 von Petra65

Habe nun einen Großteil der Seiten geändert, doch eines funktioniert leider noch nicht:

Ist-Zustand:
Wird ein Hauptpunkt angeklickt, so öffnet sich das Untermenü

Soll-Zustand:
Es soll sich aber auch die betreffende Seite öffnen
--> Wir also der Hauptpunkt "Impressum" angeklickt, so soll sich die Seite "Impressum" öffnen, aber auch das Untermenü !!


Kann man das noch irgendwie, irgendwo einbinden ???

Das muss doch bestimmt in dem Switchlayer geschehen? Aber wie ????

Antwort 19 von rfb

entferne jeweils
return false
in den onclick-Attributen der Links

Wobei hierfür eine JavaScript-Lösung vollkommen sinnlos ist, da du dann das Menü sowieso nur statisch benutzt.

Einfacher ist dann
auf allen Seiten nur Hauptmenü
und nur auf zB. Impressumsseite das Untermenü zu impressum.

Denn auf den anderen Seiten wird es sowieso nie angezeigt, jeder Versuch das Untermenü zu öffnen führt ja gleich auf die Impressumsseite.

Antwort 20 von Petra65

Jawollll .... funktioniert wie gewünscht .....

"Der Sonntag ist gerettet ;-)"


Vielen, vielen Dank

Antwort 21 von LOLO

Hi, wenn jemand jscript nicht aktiviert hat nützt ihm das Menü auch nichts.

Antwort 22 von Petra65

Ich weiss .....

Schreibe die HP für meinen Vater - dieser will es unbedingt so, habe aber für diese Fälle ein zweites Menü ;-)

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: