Navigation ohne Javascript, nur CSS

[opi]

Hallo zusammen,

überall lese ich das Gleiche...

eine Navigationsleiste mit DropDownMenu beim überfahren mit der Maus
ist nur mit Javascript möglich, wenn man diese Funktionalität in
allen Browsern abdecken möchte. Der IE scheint als einziger Probleme
damit zu haben.

Ist das tatsächlich so? Wohin nur mit meinen ganzen Links?

Ich möchte kein Javascript nutzen, sondern nur CSS.

Greez,
opi

[beza1e1]

Meine Googlesuche brachte mir das:
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp

[Cyx23]

Hallo,

Meine Googlesuche brachte mir das:
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp

Mit behavior:..htc für die IE, was letztlich wohl auf _JScript_ hinausläuft.

Einige einfache CSS hover-Konstrukte sollten auch für den IE per CSS möglich
sein, da müßte auch was im Archiv zu finden sein (tooltips o.ä.).
Ansonsten läuft es halt doch auf JavaScript hinaus.

Falls die Navigation ohne Script ausreicht, etwa wenn die noch erreichbare
Unterseite die weiteren Untermenus per CSS zeigt, sollte ein solches Menu
einsetzbar sein, zumal m.E. beim IE 7 auf eine entspr. CSS-Unterstützung
gehofft werden kann.

Grüsse

Cyx23

[Gunther]

Hallo Kristof,

Einige einfache CSS hover-Konstrukte sollten auch für den IE per CSS möglich sein, da müßte auch was im Archiv zu finden sein (tooltips o.ä.).

ich überlege auch gerade an einer Lösung für ein zweizeiliges horizontales Menü herum. Für moderne Browser kann man es per CSS ja so gestalten, dass beim Hovern der Top-Links die jeweilige Sublevel Zeile angezeigt wird und auch anklickbar ist. Das funktioniert ja beim IE bekanntermaßen nicht.

Eine Idee von mir ist die, dass für den IE dann die jeweils untere Zeile als Popup zwar angezeigt wird, die Links dann natürlich keine echten Links sind (die Idee basiert auf den Pure CSS-Popups u.a. von Eric Meyer).

Irritiert das die User zu sehr? Hast du eine andere/bessere Idee?

Vielen Dank,

Gruß Gunther

[Cyx23]

Hallo Gunther,

Eine Idee von mir ist die, dass für den IE dann die jeweils untere Zeile als Popup zwar angezeigt wird, die Links dann natürlich keine echten Links sind (die Idee basiert auf den Pure CSS-Popups u.a. von Eric Meyer).

Irritiert das die User zu sehr? Hast du eine andere/bessere Idee?

Müsste ich mir mal ein konkretes Beispiel anschauen.

Geht es auch darum Links auf sich selbst zu vehindern?
Halte ich nicht für so wichtig, eine besondere inhaltliche Kennzeichnung ist
aber wohl vorteilhaft.

Popup-Menus sind m.E. sowieso etwas zwiespältig weil der User sich nicht komfortabel
in einer (bei mehreren Ebenen) Baumstruktur bewegen kann wenn die Menus gleich
(mouseout) wieder zuklappen, per CSS sind auch keine timeouts möglich, vergrössern
der hover-flächen ist u.U. schwierig.

Und müßte bei der Auswahl von Unterpunkten, also beim Laden der neuen Seite,
eigentlich das betr. Menu sowieso offenbleiben, oder reicht es wenn
der betr. Hauptpunkt andersfarbig herausgestellt wird und dann beim
Aufklappen nochmals andersfarbig die aktuelle Seite erkennbar wird?

Grüsse

Cyx23

[Gunther]

Hallo Kristof,

Eine Idee von mir ist die, dass für den IE dann die jeweils untere Zeile als Popup zwar angezeigt wird, die Links dann natürlich keine echten Links sind (die Idee basiert auf den Pure CSS-Popups u.a. von Eric Meyer).

Irritiert das die User zu sehr? Hast du eine andere/bessere Idee?

Müsste ich mir mal ein konkretes Beispiel anschauen.

Hier ein Beispiel, welches die Grundstruktur verdeutlicht: http://tutorials.alsacreations.com/modelesmenus/hd2.htm

Ich habe letztlich noch ein 'besseres' gesehen - finde es aber im Augenblick nicht wieder.

Geht es auch darum Links auf sich selbst zu vehindern?

ja klar - ich finde Links auf die Seite, auf der ich mich gerade befinde sehr lästig, störend und überflüssig

Popup-Menus sind m.E. sowieso etwas zwiespältig weil der User sich nicht komfortabel
in einer (bei mehreren Ebenen) Baumstruktur bewegen kann wenn die Menus gleich
(mouseout) wieder zuklappen, per CSS sind auch keine timeouts möglich, vergrössern
der hover-flächen ist u.U. schwierig.

Und müßte bei der Auswahl von Unterpunkten, also beim Laden der neuen Seite,
eigentlich das betr. Menu sowieso offenbleiben, oder reicht es wenn
der betr. Hauptpunkt andersfarbig herausgestellt wird und dann beim
Aufklappen nochmals andersfarbig die aktuelle Seite erkennbar wird?

Also das o.g. Beispiel ist optisch natürlich keine Augenweide. Man könnte das Ganze natürlich optisch netter gestalten, aber es veranschaulicht was ich meine.

Der gewählte Top-Level Menüpunkt sollte
a) im Vordergrund sein
b) nicht anklickbar
c) die zugehörige Sub-Level Zeile auch permanent angezeigt werden

Beim Hovern über die anderen Top-Level Menüpunkte soll bei modernen Browsern die jeweils zugehörige Sub-Level Zeile angezeigt werden mit den anklickbaren Sub-Links.

Da der IE an dieser Aufgabe scheitert (jedenfalls ohne zusätzliche Behaviors, auf die ich aber verzichten möchte), war meine Idee, dass in den IEs wenigstens beim Hovern über die Top-Level eine "Pseudo Sub-Level Zeile" angezeigt wird (bspw. als <span>). Natürlich kann diese Zeile dann keine echten anklickbaren Links enthalten, aber der User sieht wenigstens, was für Unterpunkte vorhanden sind (anklickbar werden sie für ihn dann erst, wenn er die Seite über den Top-Level Link aufgerufen hat und somit die Sub Zeile auch im IE mit 'echten' Links angezeigt wird).

Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt!?

Gruß Gunther

[Cyx23]

Hallo Gunther,

ja klar - ich finde Links auf die Seite, auf der ich mich gerade befinde sehr lästig, störend und überflüssig

Ich finde solche Links auch schon mal komfortabel, etwa um eine Seite per rechter Maustaste
nochmal zu laden, und kaum störend wenn die betr. Links erkennbar sind.
Mir scheint es auch logisch die Navigation weitgehend konsistent umzusetzen, allerdings
habe ich da noch nicht gründlich genug mit Screenreadern usw. probiert was an zusätzlicher
Kennzeichnung optimal ist.

Also das o.g. Beispiel ist optisch natürlich keine Augenweide. Man könnte das Ganze natürlich optisch netter gestalten, aber es veranschaulicht was ich meine.

Das Beispiel hat zumindest nicht das Problem zuviel Platz auf der Seite zu verbraten wenn
Unter-Menus immer offen sind, und ist von daher gut geeignet auch für den IE.

Da der IE an dieser Aufgabe scheitert (jedenfalls ohne zusätzliche Behaviors, auf die ich aber verzichten möchte), war meine Idee, dass in den IEs wenigstens beim Hovern über die Top-Level eine "Pseudo Sub-Level Zeile" angezeigt wird (bspw. als <span>). Natürlich kann diese Zeile dann keine echten anklickbaren Links enthalten, aber der User sieht wenigstens, was für Unterpunkte vorhanden sind (anklickbar werden sie für ihn dann erst, wenn er die Seite über den Top-Level Link aufgerufen hat und somit die Sub Zeile auch im IE mit 'echten' Links angezeigt wird).

Ist in sich schlüssig und vielleicht derzeit die optimale Lösung, ich würde aber dafür nicht
das HTML weiter anpassen wollen. Dazu sollten den IE-Usern verfügbare Effekte vielleicht auch
angeboten werden wenn die Präsentation dann über viele Browser einheitlich ist.
Wenn zusätzliche Elemente usw. nötig sind scheint mir JavaScript u.U. doch das kleinere Übel
falls ohne JScript die Navigation noch klappt.
Dabei gehe ich aber auch davon aus dass JavaScript meist aktiv ist und eh irgendwann ein
besserer IE 7 kommt, ansosnten lohnt es sich schon für IE-Nutzer mit deaktiviertem Script
optimale Bedingungen zu schaffen.

Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt!?

;-))

Grüsse

Cyx23

[Gunther]

Hallo Kristof,

vielen Dank für deine Ausführungen. Habe jetzt das Beispiel (bei ALA) wiedergefunden und wollte es noch der Vollständigkeithalber nachreichen.

Hier also der Link: Hybrid CSS Dropdowns

Gruß Gunther

[Gunther]

Hallo,

überall lese ich das Gleiche...

eine Navigationsleiste mit DropDownMenu beim überfahren mit der Maus
ist nur mit Javascript möglich, wenn man diese Funktionalität in
allen Browsern abdecken möchte. Der IE scheint als einziger Probleme
damit zu haben.

Das ist im Prinzip richtig. Du kannst es für 'alle' (neueren) Browser (außer IE) nur mit CSS realisieren. Für den IE auf ein entsprechendes behavior .htc setzen. Für IE-User ohne JS bleibt dann immerhin noch der Toplevel der Navigation erreichbar (was bei Vorhandensein der Sublevel auf der jeweiligen Seite durchaus ausreichen sollte).

Ist das tatsächlich so? Wohin nur mit meinen ganzen Links?

Ja! Vielleicht mal deine Links zusammenfassen, kategoriesieren, strukturieren, etc.!

Das Problem besteht im Wesentlichen darin, dass der IE die Pseudoklasse :hover nur auf das <a> Element anwenden kann im gegensatz zu anderen Browsern, und deshalb ein spezielles Behavior (JS Funktion) braucht, die ihm dabei auf die Sprünge hilft. Such' mal in Google nach: behavior hover all!

Ich möchte kein Javascript nutzen, sondern nur CSS.

Vom Grundsatz her löblich, aber gegen JS ist ja nichts einzuwenden, solange alle Inhalte auch ohne zugänglich bleiben.

Gruß Gunther

[opi]

Hallo Gunther,

Ist das tatsächlich so? Wohin nur mit meinen ganzen Links?

Ja! Vielleicht mal deine Links zusammenfassen, kategoriesieren, strukturieren, etc.!

Das habe ich alles schon getan und gerade wegen der Struktur und
Vielzahl der Links wäre ein DropDownMenu optimal.

Meine Hauptnavigationsleiste ist aus diversen Gründen horizontal.
Aus diesem Grund sagt mir dein Beispiel ein paar Nachrichten weiter

http://tutorials.alsacreations.com/modelesmenus/hd2.htm

sehr zu! Aber was passiert, wenn Javascript deakitiviert ist?
Das muss ich mal ausprobieren! Bei einer vertikalen DropDownListe
sind bei ausgeschaltetem Javascript die Links zumindest unter dem
Hauptlink zu sehen. Bei einer horizontalen DropDownListe, wie in
deinem Beispiel, werden die DropDownListen der Hauptlinks wohl
untereinander liegen und es wird schwer zu erkennen sein, welche
Liste nun zu welchem Hauptlink gehören.

Beispiele mit ausgeschaltetem Javascript:

Beispiel 1 (vertikale DropDownListe):

-------------------------------------------
| Hauptlink 1 | Hauptlink 2 | Hauptlink 3 |
-------------------------------------------
| DD-Link 1-1 | DD-Link 1-2 | DD-Link 1-3 |
| DD-Link 2-1 | DD-Link 2-2 | DD-Link 2-3 |
| DD-Link 3-1 | DD-Link 3-2 | DD-Link 3-3 |
-------------------------------------------

Beispiel 2 (horizontale DropDownListe):

-------------------------------------------
| Hauptlink 1 | Hauptlink 2 | Hauptlink 3 |
-------------------------------------------
| DD-Link 1-1   DD-Link 2-1   DD-Link 3-1 |
-------------------------------------------
| DD-Link 1-2   DD-Link 2-2   DD-Link 3-2 |
-------------------------------------------
| DD-Link 1-3   DD-Link 2-3   DD-Link 3-3 |
-------------------------------------------

Im 1. Beispiel finde ich die Struktur der DDListen doch noch über-
sichtlicher, als in deinem Beispiel (wenn ich mich jetzt mit der
Anzeige der Links bei ausgeschaltetem Javascript nicht täusche).

Greez,
opi

[Ashura]

Hallo Gunther.

Das Problem besteht im Wesentlichen darin, dass der IE die Pseudoklasse :hover nur auf das <a> Element anwenden kann [...]

Konkreter: er kann :hover nur auf a[href] anwenden.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Gunther]

Hallo Ashura.

Das Problem besteht im Wesentlichen darin, dass der IE die Pseudoklasse :hover nur auf das <a> Element anwenden kann [...]

Konkreter: er kann :hover nur auf a[href] anwenden.

Ja, natürlich. Vielen Dank für Präzisierung.

Einen schönen Donnerstag noch.

Auch so.

Gruß Gunther

[MudGuard]

Hi,

Das Problem besteht im Wesentlichen darin, dass der IE die Pseudoklasse :hover nur auf das <a> Element anwenden kann [...]
Konkreter: er kann :hover nur auf a[href] anwenden.

Also müßte ja
a[href]:hover { color:red; background:fuchsia; }
funktionieren im IE?
Ich hab da so meine Zweifel ... ;-)

cu,
Andreas

[Ashura]

Hallo MudGuard.

Das Problem besteht im Wesentlichen darin, dass der IE die Pseudoklasse :hover nur auf das <a> Element anwenden kann [...]
Konkreter: er kann :hover nur auf a[href] anwenden.

Also müßte ja
a[href]:hover { color:red; background:fuchsia; }
funktionieren im IE?
Ich hab da so meine Zweifel ... ;-)

Notiz an mich: Beim nächsten Mal wieder in Worten statt CSS-Syntax ausdrücken.

Vom logischen Blickwinkel aus gesehen müsste er a[href] ebenso verstehen wie a:link, genau so, wie er *[class="foo"] bzw. *[id="bar"] umsetzen müsste, wenn er .foo respektive #bar versteht.

Aber IE und Logik...

Einen schönen Donnerstag noch.

Gruß, Ashura

[Ashura]

Hallo.

Vom logischen Blickwinkel aus gesehen müsste er [...] *[class="foo"] [...] versteht.

Ergänzung: er müsste sogar *[class~="foo"] beherrschen.

Aber IE und Logik...

Gilt weiterhin.

Einen schönen Donnerstag noch.

Gruß, Ashura