CSS-Navigation mit JavaScript ergänzen

[blabla333]

Bei dieser Navigation habe ich aktuell noch das Problem, dass ich z.B. über "Thema 2" schlecht zur "Unterkategorie 4" gelange. Dadurch das die untere Leiste so schmal ist, müsste man sehr genau mit der Maus arbeiten, was natürlich nicht optimal ist. Ich denke per CSS kann ich das Problem nicht wirklich lösen...

Kann ich per JavaScript (am Besten JQuery, da das sowieso eingebunden sein wird) es irgendwie so einrichten, dass das Untermenü nicht sofort verschwindet, wenn die Maus nach unten die Navigation verlässt (oder zumindest verzögert) und sich nicht umgehend die Unterkategorien zeigen, sobald man nur etwas schräg über eine andere Hauptkategorien fährt (wenn man von Thema 2 auf Unterkategorie 4 möchte, gelangt man schnell auf Thema 3 und es werden sofort die entsprechenden Unterkategorien angezeigt, so dass man sein Ziel gar nicht mehr erreicht)?

Welche Vorschläge hättet ihr?

 

[threadi]

Mit JavaScript ginge das durchaus, aber auch mit CSS:
http://www.css-wiki.com/css-eigenschaft/transition-delay

 

[CPCoder]

Man sollte jedoch beachten, dass es noch immer Browser(-Versionen, die noch weitgehend im Einsatz sind) gibt, die bestimmte CSS3 Sachen noch nicht unterstützen.

Unter anderem fallen mir hier die Versionen 6-9 des IE ein, welche Transitions noch noch vollständig unterstützen.

 

[blabla333]

Hmm... Ich bin da zu blöd zu. Ich finde einfach nicht die passende Stelle für transition-delay. Ich kann alles verzögern, aber nicht das, was ich will und das ist ja das einblenden der unteren Navigation.

 

[blabla333]

Wie würde man es denn mit JavaScript umsetzen können?

 

[Tronjer]

Wie würde man es denn mit JavaScript umsetzen können?

- jQuery hover() für mousein und mouseout
- in die Callbacks dann ein show() und hide() mit duration (bsw. hide(2000) )

 

[blabla333]

Hmm. Mein Problem ist aber im Moment, dass ich es gerne so hätte, dass User, die JavaScript deaktiviert haben, die Navigation so sehen, wie sie jetzt ist und die, die JavaScript aktiviert haben, sehen dann eben diesen Verzögerungseffekt.
Das geht aber nicht, da CSS als hover bereits display:block vorgibt, so dass das Element bereits aktiv ist und mein JavaScript deshalb nicht greift.

 

[Tronjer]

Und ich dachte, dein Problem bestünde darin, dass du die Navi weder mit jQuery noch CSS3 hinbekommst. ;)

Aber was die Frage betrifft, so lässt sich natürlich auch beides miteinander kombinieren, wenn das Styling für den Hover-Effekt über CSS-Klassen geschieht, die bei eingeschaltetem JS dynamisch aus dem HTML gelöscht werden.

 

[blabla333]

Sagen wir mal so: Es geht weder das eine, noch das andere, also versuche ich die Kombi ;-)