[DRINGEND] - Bitte um Hilfe. Navigations-Menü hat 'nen logischen Fehler.

[dsolianyi]

Hallo!

Habe ein Problem mit programmieren eines Navigationsmenü.
Es besteht aus 2 Teilen: Haupt- und ein Submenü.
Das Submenü funktioniert noch nicht ganz.

Um es klarer zu machen...
1. ...geht mal auf diese Seite
2. ...fahrt mit dem Maus über "Leistungen" drüber (das Sub-Menü ist zu sehen);
3. ...fahrt über etwas anderes im Hauptmenü drüber (das Sub ist weg);
4. ...fahrt Ihr mit der Maus nun dort, wo das Sub-Menü zu sehen war, ohne die "Leistungen" zu berühren...

Seht Ihr was ich meine: das Sub ist schon wieder da; das sollte aber nicht sein.
Helft mir bitte. Hier ist die JavaScript-Datei. Kenne mich bei JS nicht sehr gut aus und mich daher ziemlich einfachen Befehlen bedient. Wäre aber dankbar, wenn mir jemmand posten würde, wie ich den Script besser umschreiben könnte.

Danke in Voraus!

Mit freundlichen Grüssen
SOLIANYI Dmitri

 

[Mogler]

wenn ichs richtig verstanden habe:

bei hover über die hauptmenüpunkte werden die subbilder durch spacer-gifs ersetzt - am hover (subbilder) ändert das aber nichts ...

der logikfehler liegt im hover über die supmenüpunkte

einfacher wäre das doch mit divs ... bei hover über die menüpunte werden die jeweiligen divs eingeblendet - alle anderen ausgeblendet.

Mogler

 

[dsolianyi]

Original geschrieben von Mogler
wenn ichs richtig verstanden habe:

bei hover über die hauptmenüpunkte werden die subbilder durch spacer-gifs ersetzt - am hover (subbilder) ändert das aber nichts ...

der logikfehler liegt im hover über die supmenüpunkte

einfacher wäre das doch mit divs ... bei hover über die menüpunte werden die jeweiligen divs eingeblendet - alle anderen ausgeblendet.

Mogler

Hi!

Hast schon richtig verstanden...
Mit den DIV's zu arbeiten traue ich mich nicht, da - meines Wissens nach nicht jeder Browser die DIV's richtig anzeigt; und es soll ja ein Cross-Browser-Lösung werden.

mfG
SOLIANYI Dmitri

 

[Tobias Menzel]

Hi,

Dass DIVs nicht überall korrekt angezeigt werden, war meines Wissens einmal. Die großen aktuellen Browser machen wohl keine Probleme (ich habe eine Seite mit DIV-Dropdowns erstellt, die in IE6, NN7, Opera 7 und Mozilla Firebird 0.7 probelmlos läuft). Wenn Deine Seite auch auf älteren Versionen lauffähig sein soll, kannst Du es sicher auch mit Bildern machen.

Frage: Bekommen die anderen Menüpunkte (z.B. Referenzen) auch so ein Untermenü? Das käme sich dann doch ins Gehege.

Um das rollOver bei "versteckten" Menüelementen zu unterdrücken, käme eine HIlfsvariable ("menu1on") in Frage, die beim Setzen der Spacer-GIFs auf true gesetzt wird. Ich habe Deinen Quellcode jetzt nicht gesehen, aber wenn Du auf den IMGs direkt mit "img.src" arbeitest, würde sich eine Wrapper-Funktion anbieten:

on MouseOver="rollover(this, entry_nr)"

function rollover(myobj, mnr) {
  if (menu1on) {
    myobj.src=overimg[mnr];
  }
}

Gruß

 

[dsolianyi]

@Datic

Hi,

den Code checke ich nicht ganz. Kannst mir es detailierter erklären, was wohin gehört? Danke!


@all
Wenn ich es mit DIV's machen, sollte: angenommen ich lege zwei DIV's an

<DIV>
...Hier wird die Tabelle mit Submenüelementen eingefügt...
</DIV>
<DIV>
... Hier sind laute Spacers...
</DIV>

1. Welche Attribute sollten die DIV's haben (Name, Id, Style e.t.c.)
2. Wie sollte der RollOver-Script aussehen, der das Sub-Menü nur beim "Leistungen"-RollOver ein- und bei allen anderen ausblendet?

mfG
SOLIANYI Dmitri

 

[Tobias Menzel]

Hi,

1.) [Mit Bildern]

ich habe noch mal ein wenig ausführlicher aufgeschrieben, wie ich es mir gedacht habe:

<script language="JavaScript" type="text/javascript">
var out_img = new Array();
var over_img= new Array();
var imglink = new Array();
var img_count = 6 // Die Anzahl der Schaltflächen im Menü
for (i=1;i<=img_count;i++) {
  out_img[i]=new Image();
  over_img[i]=new Image();
  out_img.src="out"+i+".gif";
  over_img.src="over"+i+".gif";
  imglink[i]="page"+i+".htm";
}

function rollover(number) {
  if (menu1on) {
    for (i=1;i<=img_count;i++) {
      eval(document+".image"+i).src=out_img[i].src;
    }
    eval(document+".image"+number).src=over_img[i].src;
  }
}

function rollout(number) {
  if (menu1on) eval(document+".image"+number).src=out_img[i].src;
}

function getlink(number) {
  if (menu1on) window.location=imglink[number];
}
</script>
<body>
<img name="image1" src="" width="32" height="32" alt="" onMouseOver="rollover(1)" onMouseOut="rollout(1)" onClick="getlink(i)">

Dabei sind die Bilddateien "out1.gif" - "out6.gif" bzw. "over1.gif" - "over6.gif" benannt. Du kannst Sie aber auch per Hand (ohne Schleife) definieren.

Die Bild-IDs auf der Seite sind hier mit "image1" - "image6" benannt.

Jetzt sollte nur noch eine Variable "menu1on" gesetzt werden, sobald das Menü sichtbar wird bzw. auf false gesetzt werden, wenn es unsichtbar wird.

Dieses Beispiel gilt so natürlich nur für 1 Menü - für mehrere müsste es dementsprechend erweitert werden (z.B.: welches Menü ist z.Zt. sichtbar?)

2.) [Ebenen]

Eine Ebene für ein Menü könnte prinzipiell z.B. so aussehen:

<div id="Menu1" style="position:absolute; width:100; height:80; z-index:1; left: 100; top: 100;"></div>

Dort hinein kommen dann die einzelnen Bilder.

Jetzt muss die Ebene nur noch beim rollOver über den Hauptmenüpunkt eingeblendet werden bzw. beim rollOver über die anderen Menüpunkte ausgeblendet werden:

document.getElementById("Menu1").style.visibility="hidden";// bzw. "visible"

Gruß