Dietmar: Vertikale Navigationsleiste

Hallo,

ich bin ganz neu hier und im Gebrauch des Forums, in htm und css noch nicht so bewandert, wie ich gerne wäre.

Ich habe vertikale Navigationsleisten mit 2 Unterebenen erstellt, die ich mit einem externen Stylesheet nach dem Vorbild von http://de.selfhtml.org/css/layouts/navigationsleisten.htm#ebenen produziert habe. Die css-Datei ist als www.schmeckt.de/nav.css zu finden.

Prinzipiell bin ich damit zufrieden.

Jetzt hätte ich gerne noch, dass die Navigationsleiste mit der 2. und 3. Ebene an der Stelle geöffnet bleibt (oder wieder geöffnet wird) , wo der User sich gerade befindet, solange er mit der Maus nicht über der Navigationsleiste ist, um was Neues auszuwählen.

Geht das überhaupt nur mit css? Wenn ja, was müsste ich ändern?

(Selbstverständlich habe ich das Forum durchsucht etc, so gut ich es konnte)

Ich wäre für hilfreiche Hinweise sehr dankbar.

Gruß
Dietmar

PS: Die Einzelseiten erstelle ich mit einer kleinen Access-XP-Datenbank und VBA, veröffentlichten und schreiben mache ich mit Frontpage 2002.

  1. Geht das überhaupt nur mit css? Wenn ja, was müsste ich ändern?

    Jein, es ist theoretisch machbar indem du beim :hover-Zustand das umgebende ul-Element auf die größe des Viewports oder Dokuments vergrößertst damit der Besucher das Menü quasi nicht mehr verlassen kann, alle weiteren Dinge die irgendwie aktivierbar sein müssen, musst du dann darüberpositionieren - damit überdeckst du aber auch den "Rest" der Seite, markieren von Textstellen wsw ist dann vermutlichn nicht mehr möglich.

    Ich wäre für hilfreiche Hinweise sehr dankbar.

    JavaScript :)

    beim mouseover setze eine Klasse "active" (oder wie auch immer) und entferne diese von allen anderen Menüpunkten

    1. Hallo,

      Geht das überhaupt nur mit css? Wenn ja, was müsste ich ändern?

      Jein, es ist theoretisch machbar indem du beim :hover-Zustand das umgebende ul-Element auf die größe des Viewports oder Dokuments vergrößertst damit der Besucher das Menü quasi nicht mehr verlassen kann, alle weiteren Dinge die irgendwie aktivierbar sein müssen, musst du dann darüberpositionieren - damit überdeckst du aber auch den "Rest" der Seite, markieren von Textstellen wsw ist dann vermutlichn nicht mehr möglich.

      Ich wäre für hilfreiche Hinweise sehr dankbar.

      JavaScript :)

      Danke für die Antwort,
      aber Java kann und wollte ich nicht.

      Und es geht doch, mein css war nur fehlerhaft.
      Vielleicht habe ich jetzt auch verstanden, wie man hier Links setzen muss - jedenfalls soll hier zu sehen sein, wie ich es es haben wollte:
      http://www.schmeckt.de/htm/Programm/Schwerpunkte/Salate.htm

      Die externe css-Daei: http://www.schmeckt.de/Nav.css

      Aber hier der wesentliche Ausschnitt:

        
       /* Erweiterung zur dynamischen Ein-/Ausblendung */  
       ul#Navigation li > ul { /* 2. Ebene grundsätzlich nicht einblenden*/  
          display: none;  
        	}  
       ul#Navigation li:hover ul {  
          display: block;  
        	}  
       ul#Navigation li a#aktuella + ul {  
          display: block;  
      	}  
       ul#Navigation li ul li ul {  
          display: block;  
        	}  
       ul#Navigation li ul li:hover ul {  
          display: block;  
        	}  
        ul#Navigation li ul li a#aktuellb + ul {  
          display: block;  
        }  
      
      

      Vermutlich ist da noch was zu verbessern, aber im Wesentlichen funktioniert es jetzt.

      Gruß
      Dietmar

      1. JavaScript :)

        Danke für die Antwort,
        aber Java kann und wollte ich nicht.

        Brauchst du auch nicht, darum sagte ich JavaScript :)

        Das lässt sich auch ergänzend einsetzen (unobtrusiv).

        ul#Navigation li a#aktuella + ul {
          ul#Navigation li ul li a#aktuellb + ul {

        Vermutlich ist da noch was zu verbessern, aber im Wesentlichen funktioniert es jetzt.

        Der Adjacent Sibling Selector (+) funktioniert nicht im IE6, das solltest du bedenken wenn du diverse Tests durchführst.

        1. Hallo Rebell (oder wie auch immer),

          JavaScript :)

          Danke für die Antwort,
          aber Java kann und wollte ich nicht.

          Brauchst du auch nicht, darum sagte ich JavaScript :)

          Von beidem verstehe ich so sehr nichts, dass ich nicht mal den Unterschied wusste ;-)

          Das lässt sich auch ergänzend einsetzen (unobtrusiv).

          Selbstverständlich hast Du Recht - vielleicht später einmal. Zunächst muss ich mal html lernen und vor allem noch umsetzen.

          ul#Navigation li a#aktuella + ul {
            ul#Navigation li ul li a#aktuellb + ul {

          Vermutlich ist da noch was zu verbessern, aber im Wesentlichen funktioniert es jetzt.

          Der Adjacent Sibling Selector (+) funktioniert nicht im IE6, das solltest du bedenken wenn du diverse Tests durchführst.

          Danke für den Hinweis!

          "Diverse" Tests hab ich noch nicht, aber im IE6 probiert, da wird sowieso nix ein- oder ausgeblendet, wie auch hier http://de.selfhtml.org/css/layouts/navigationsleisten.htm#dynamisch unter "Beachten Sie" erwähnt. Da kann ich erst mal mit leben. Muss ich wohl, vorerst ;-).

          Gut wäre natürlich, wenn ich eine Browserweiche einbauen könnte, und zwar so, dass Schriftgrößen und Abstände kleiner sind, damit die Navigation in vertikaler Richtung nicht so viel Platz einnehmen würde. Aber davon verstehe ich auch noch nicht genug.

          Firefox, aktuelle Version auf Ubuntu, funzt korrekt.

          Gruß
          Dietmar