CSS / JavaScript: Eigenes Navigationsmenu

[Remo]

Ich bin daran, ein Navigationsmenu mit CSS und 2 kleinen JavaScript Funktionen zu konstruieren. Es funktioniert nicht schlecht bis jetzt, aber ein Problem gibt es, für welches ich hier nun eine Lösung suche.

Ein Menu-Eintrag besteht aus 2 Ebenen, einem Haupteintrag und einem Untermenu, dass erst beim onMouseover des Hauptmenupunktes angezeigt wird.

  
<a class="nav-item" href="" onMouseover="javascript:show('gallery');" >  
   <img border="0" src="images/orange_block.gif" width="11" height="11">  
   Bilder  
</a>  
<div class="sub-nav-item" id="gallery" onMouseout="javascript:hide('gallery');">  
   <a href="?nav=15">USA 04/05</a><br>  
   <a href="?nav=16">Test</a>  
</div>  

Die beiden benutzten JS-Funktionen sind wie folgt definiert:

  
function show (id) {  
   if(document.getElementById){  
     document.getElementById(id).style.visibility = "visible";  
     document.getElementById(id).style.display = "block";  
   }  
}  
  
function hide (id) {  
   if(document.getElementById){  
     document.getElementById(id).style.visibility = "hidden";  
     document.getElementById(id).style.display = "none";  
   }  
}  

Das Problem ist nun folgendes: Das Untermenu enthält mehrere Links. Sobald ich aber mit dem Cursor einen Link verlasse, verschwindet das Untermenu. Das verstehe ich nicht. Eigentlich wäre meine Absicht, dass das Menu nur verschwindet, wenn ich den div-Bereich verlasse. Wo liegt mein Überlegungsfehler?

Das ganze kann man sich hier (http://www.n.ethz.ch/student/martire/test) anschauen.

Die relevante Definition des .sub-nav-item sieht übrigens so aus:

  
.sub-nav-item{  
    position: relative;  
    top: 0px;  
    left: 15px;  
    background-color: #999966;  
    height: 100px;  
    width: 100px;  
    font-size: 10px;  
    display: none;  
}  

Danke für Hinweise!

[Felix Riesterer]

Lieber Remo,

<div class="sub-nav-item" id="gallery" onMouseout="javascript:hide('gallery');">

lass das "javascript:" aus dem eventhandler heraus, denn dort hat es nix verloren!  
  

> ~~~javascript
  

>      document.getElementById(id).style.visibility = "visible";  
>      document.getElementById(id).style.display = "block";

Wozu brauchst Du sowohl visibility als auch display? Wenn ich an display herumfummle, dann kann mir doch visibility in der default-Einstellung ("visible") egal sein! Doppelt gemoppelt führt hier eher zu Problemen...

document.getElementById(id).style.visibility = "hidden";
     document.getElementById(id).style.display = "none";[/code]

Siehe oben. Besonders hier ist das mit visibility überflüssig, da display:none alles entfernt (während visibility:hidden eine Platzhalter-Funktion hat).

Dein Problem ist wohl das Event-Bubbling. Wenn Dein Javascript feuert, weil Du den Link verlassen hast, dann kann auch sein, dass das übergeordnete Element zusätzlich feuert, so dass verschiedene Ebenen plötzlich ihre display-Eigenschaft auf "none" setzen.

Wenn Du CSS einsetzt, was hat dann <center><table border="0" cellpadding="0" cellspacing="0" width="800"> in Deinem Quelltext verloren??? Das Gleiche gilt für die Javscript-Umsetzung Deines Menüs. Schau mal in SelfHTML über CSS-Navigation nach. Dort steht, wie Du das _richtig_ machst!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Remo]

Felix,

Unterdessen habe ich das javascript: aus dem event-handler rausgenommen.

Dein Problem ist wohl das Event-Bubbling. Wenn Dein Javascript feuert, weil Du den Link verlassen hast, dann kann auch sein, dass das übergeordnete Element zusätzlich feuert, so dass verschiedene Ebenen plötzlich ihre display-Eigenschaft auf "none" setzen.

Ich verstehe dies Erklärung nicht. Gehe ich richtig in der Annahme, dass der div-Bereich des Submenus die Links umfasst? Dann verstehe ich eben nicht, warum Javascript beim verlassen des Links feuern sollte! onMouseout ist ja nur für den div-Bereich definiert....
Was meinst du mit "...verschiedene Ebenen plötzlich ihre display-Eigenschaft auf 'none' setzen"? Warum sollte so was passieren? Die hide Funktion ist ja explizit nur für das eine div-Element ausgelegt. Hättest du einen Vorschlag für die Lösung des Problems?

Wenn Du CSS einsetzt, was hat dann <center><table border="0" cellpadding="0" cellspacing="0" width="800"> in Deinem Quelltext verloren??? Das Gleiche gilt für die Javscript-Umsetzung Deines Menüs. Schau mal in SelfHTML über CSS-Navigation nach. Dort steht, wie Du das _richtig_ machst!

Ich habe mir natürlich zuerst die Navigationsmenus von SELFHTML angeschaut, welche ich aber für zu gross für meinen Bedarf empfinde. Daher würde ich gerne mein Menu vervollständigen.
Und du hast Recht, all die table Formatierungen gehören ausgelagert. Trotzdem bin ich nun in erster Linie an der Lösung des anderen Problems interessiert.

Danke,
Remo

[Felix Riesterer]

Lieber Remo,

Ich verstehe dies Erklärung nicht.

Vergiss es, denn meine Vermutung hat sich nicht bestätigt. Schau Dir Deinen Code nochmal an:

            <div class="navigation">  
              <h1>navigation</h1>  
              <a class="nav-item" href="?nav=0" onMouseover="javascript:show('home');">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Home  
              </a>  
  
              <div class="sub-nav-item" id="home" onMouseout="javascript:hide('home');">home</div>  
              <a class="nav-item" href="?nav=1" onMouseover="javascript:show('about');">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  &Uuml;ber mich  
              </a>  
              <div class="sub-nav-item" id="about" onMouseout="javascript:hide('about');">über mich</div>  
              <a class="nav-item" href="?nav=2">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
  
                  ETH  
              </a>  
              <a class="nav-item" href="?nav=3">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Hürnen  
              </a>  
  
              <a href="" onMouseover="javascript:show('gallery');" class="nav-item">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Bilder  
              </a>  
  
              <div class="sub-nav-item" id="gallery" onMouseout="javascript:hide('gallery');">  
                   <a href="?nav=15">USA 04/05</a><br>  
                   <a href="?nav=16">Test</a>  
              </div>  
              <a class="nav-item" href="?nav=5">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Links  
              </a>  
  
            </div>

Du hast nicht konsequent zu jedem Element, dem Du einen mouseOver gegeben hast, auch einen mouseOut gegeben. Damit bleiben manche Elemente sichtbar, da Du sie nicht unsichtbar machst.

Aber Ingo hatte mit seiner Kritik recht: Dein Quelltext ist von seiner Bedeutung her völlig daneben! Nach einer Überschrigt (die ist in Ordnung!) kommt plötzlich irgend so ein Textlink daher, der nicht in ein Blockelement (Textabsatz, Überschrift, Aufzählung, etc.) eingebunden ist. Semantisch also völlig Gaga. Und die DIVs ergeben auch keinen strukturellen Sinn. Es wäre sehr sinnvoll Deine HTML-Struktur komplett zu überarbeiten!

Also nochmal in Ingos Worten: Warum notierst Du den Quelltext nicht als <ul> mit <li>s drinnen, um sie per CSS entsprechend zu steuern? (Oder in meinen Worten:)

Schau mal in SelfHTML über CSS-Navigation nach. Dort steht, wie Du das _richtig_ machst!

Ich muss mich wiederholen!

Ich habe mir natürlich zuerst die Navigationsmenus von SELFHTML angeschaut, welche ich aber für zu gross für meinen Bedarf empfinde. Daher würde ich gerne mein Menu vervollständigen.

WAAAS??? Und was hindert Dich daran, die CSS-Angaben entsprechend anzupassen, damit die Optik für Dich passt? Ich vermute, dass Deine CSS-Kenntnisse noch im Anfangsstadium stecken, sonst würdest Du soetwas nicht schreiben.

Also: Zurück auf "Los!" und nochmal das Kapitel, dass ich Dir nannte durchgeackert. Vor allem die CSS-Angaben sorgäfltig studieren! Kopiere Dir die HTML-Datei mit dem Klapp-Beispiel auf den Desktop und fummle so lange an den CSS-Rulesets herum, bis Du verstanden hast, welche Änderungen welche Effekte haben. Dann kannst Du dieses Beispiel für Deine Seite anpassen.

Und du hast Recht, all die table Formatierungen gehören ausgelagert.

"Ausgelagert"??? Ersatzlos gestrichen meinst Du wohl!?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Remo]

Lieber Felix,

ja, ich bin ein Anfänger auf dem Gebiet CSS. Auch wenn man einiges bei SelfHTML durchgearbeitet hat ist es zu Beginn nicht einfach, eigene Fehler zu entdecken - auch du hast mal klein angefangen.
Ich finde daher deine herablassende Schreibweise absolut unangebracht - "..dein Quelltext ist völlig daneben", "... völlig Gaga", "WAAAS??" etc.

Ich schätze deine Antworten sehr sofern sie konstruktiv weiterhelfen - aber nicht in diesem Ton. Wenn dich Anfängerfehler so nerven, warum antwortest du überhaupt darauf?

Grüsse,
Remo

[Felix Riesterer]

Lieber Remo,

ja, ich bin ein Anfänger auf dem Gebiet CSS. Auch wenn man einiges bei SelfHTML durchgearbeitet hat ist es zu Beginn nicht einfach, eigene Fehler zu entdecken

Stimmt. Dafür gibt es ja nun das Forum.

• auch du hast mal klein angefangen.

Und ob! ;-)

Ich finde daher deine herablassende Schreibweise absolut unangebracht - "..dein Quelltext ist völlig daneben", "... völlig Gaga", "WAAAS??" etc.

Ist Dir mein Ton zu angriffslustig? Ist ok. Sollte Dir nur zeigen, wo Dein Problem _wirklich_ liegt. Nämlich im HTML. Wenn Du das ausgemistet hast, dann klappt's auch leichter mit dem CSS.

Ich schätze deine Antworten sehr sofern sie konstruktiv weiterhelfen - aber nicht in diesem Ton. Wenn dich Anfängerfehler so nerven, warum antwortest du überhaupt darauf?

Über meinen Ton darfst Du gerne verstimmt sein. Jedem sein Recht auf freie Meinung(s-Äußerung). Ich habe mich nur etwas gewundert, nachdem Ingo und ich Dir Hinweise gegeben hatten, dass Du sie nicht umsetzen wolltest, denn den wahren Grund (HTML) hattest Du (noch) nicht versucht, zu verbessern.

Aber ich sehe, dass Du Dich nicht verunsichern lässt. Das ist gut so, denn wenn man in HTML noch neu ist, dann ist man mit gleichzeitigen CSS-Hürden schnell und leicht am Schwimmen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Ingo Turski]

Hi,

Kopiere Dir die HTML-Datei mit dem Klapp-Beispiel auf den Desktop und fummle so lange an den CSS-Rulesets herum, bis Du verstanden hast, welche Änderungen welche Effekte haben. Dann kannst Du dieses Beispiel für Deine Seite anpassen.

genau. Aber ein Hinweis noch hierzu: es ist hilfreichm den Elementen testweise andere Hintergrundfarben zu geben und bei verschiedenen Schriftgraden zu prüfen, ob es sie wirklich nahtlos aneinander sitzen oder sich überlappen. Bei den Tests zu diesem Beispiel hatte ich (aufgrund unterschiedlicher Rundungsergebnisse) so einige Probleme...

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

<a class="nav-item" href="" onMouseover="javascript:show('gallery');" >
   <img border="0" src="images/orange_block.gif" width="11" height="11">
   Bilder
</a>
<div class="sub-nav-item" id="gallery" onMouseout="javascript:hide('gallery');">

warum keine Liste? Und vor allem: warum keine sinnvolle Verschachtelung, so daß der ganze Bereich mit dem Event-Handler angespochen wird und auch onmouseover hierin zum Zuge kommen kann?

freundliche Grüße
Ingo