JavaScript-Verzögerung für Flyout-Menu

**Christina** · 11.08.2009, 14:20

Hallo Forum,

Ich habe auf einer Seite ein Suckerfish-Menü mehr oder weniger nach dem Tutorial hier gebaut. Es funktioniert auch schon fast, nur habe ich noch Probleme mit IE 6 und 7, die die Untermenüpunkte beim hovern teilweise an der falschen Stelle einblenden. Daran tüftle ich, jetzt mein eigentliches Problem:

Für bessere Zugänglichkeit würde ich das Menü gerne mit einem Javascript etwas "verzögern", also verhindern daß die Menüpunkte beim "weghovern" gleich wieder zuklappen - es ist sonst schwierig die 3. Ebene zu erreichen. Leider habe ich von Javascript (noch

!) keine Ahnung, und bei allen Tutorials, die ich im Netz finde, begreife ich nicht richtig wie und wo die einzelnen Bestandteile des Codes hingehören und was angepaßt werden müß...

Die Seite ist zum Test unter "www.typolight.loex.de/typolight" erreichbar.

Wäre super wenn mir mal wieder jemand unter die Arme greifen kann!

Christina

**Sebastian** · 11.08.2009, 15:06

HI

es geht auch ohne Javascript. Deine Unterebenen sind einfach nicht weit genug links, ändere mal

Code:

.mod_navigation li ul {
 margin-left:109px;
}

in

Code:

.mod_navigation li ul {
 margin-left:108px;
}

Dann klappt es viel besser...

Sebastian

**Christina** · 11.08.2009, 15:35

Stimmt, das hilft schon...

Ich fand den 1px durchsichtigen Zwischenraum ganz schön, aber es macht das Menü wirklich schwieriger navigierbar. Ich habs jetzt mal so geändert, hätte aber trotzdem gern noch etwas mehr Unterstützung für zittrige Mausschieber...

Danke!

Christina

**Sebastian** · 11.08.2009, 16:32

HI

du kannst auch rund um die Flyout-Menüs dem <ul> einen padding:40px verpassen, dann klappt es nicht zu, wenn man ausversehen rausrutscht.

Sebastiian

**Christina** · 11.08.2009, 17:01

Hmm, das versteh ich jetzt nicht ganz...wenn ich ein Padding einfüge verschiebt es mir doch alles?

Christina

**Sebastian** · 12.08.2009, 06:48

HI

was du wiederum mit einem negativen margin:-40px korrigieren kannst...

Sebastian

**Christina** · 12.08.2009, 15:22

Hallo Sebastian,

das klingt ja ziemlich genial...aber ob es ohne "Nebenwirkungen" funktioniert?
Ich werds mal testen wenn ich an meine Seite komme...

Danke jedenfalls!

Christina

**Sebastian** · 12.08.2009, 17:07

HI

ich setze das immer recht erfolgreich ein.

Sebastian

**Christina** · 13.08.2009, 08:58

Hi Seabstian,

das funktioniert tatsächlich (ich hab noch einige Seltsamkeiten in den verschiedenen Menübenen), ABER: nicht im IE 6! Ich meine auch mich zu erinnern das IE6 grundsätzlich Probleme mit negativen Margins hat...

Hast Du da ein Workaround?

Und ein Problem bleibt halt bestehen: wenn man auf einem Link verharrt, klappt die Liste zu wenn man sich dann weiterbewegt, man muß also die Maus ziemlich zügig durchziehen - deswegen fände ich nach wie vor für die Usability ein JS nicht schlecht.

Christina

**Sebastian** · 13.08.2009, 11:09

HI

für den IE6: http://www.browserupdate.org/.

Was klappt wo wieder zu? Bitte genauer, bei mir trat das nicht auf.

Sebastian

**Christina** · 13.08.2009, 17:24

Lieber Sebastian,

das passiert wenn man in der 2. oder 3. Ebene des Menüs mit der Maus verharrt - was ja oft vorkommt um sich zu orientieren. Wenn man dann den Cursor weiterbewegt klappt das Menu zu. Ich dachte das läge am Prinzip, habe aber festgestellt daß es bei der statischen Version der Seite (wie sie jetzt online ist und das gleiche Menu verwendet), nicht so ist!

Woran kann das aber liegen?
Die Site ist wie gesagt hier: www.typolight.loex.de/typolight
DIe statische Version hier: www.loex.de

Vielen Dank für Deine Geduld!

Christina

**Sebastian** · 13.08.2009, 22:17

HI

bei mir tritt da kein Problem auf (FF 3.5.2 unter Windows XP SP3). Welchen Browser/ welches OS verwendest denn du?

Sebastian

**Christina** · 14.08.2009, 08:58

Ich benutze Firefox 3.0 unter OSX 10.4 jetzt gerade, aber auch unter 10.5 mit der neuesten FF-Version habe ich (zuhause) das Problem...hab aber gerade in Safari getestet und da funktioniert es auch...
Naja, dann haben da die Macuser mit FF eben Pech.

Ich will allerdings das Menu nochmal neu bauen weil ich dieses Offset-Problem im IE nicht in den Griff bekomme (bei den aktiven Links, also wenn ich z.B. auf Anwendungen klicke und der Punkt aktiv ist, wird mir im IE (6+7, 8 kann ich nicht testen), wenn ich über "Anwendungen" hovere, das Untermenü ein Stück versetzt angezeigt). Dafür finde ich einfach keine Lösung, und IE7 kann ich ja wirklich nicht ignorieren.

Puuh, das ist doch recht knifflig!

Christina

**Sebastian** · 14.08.2009, 09:00

HI

du kannst ein separates Stylesheet für den IE7 anlegen und dort das Menü anders positionieren. Dasselbe gilt auch für den IE6...

Sebastian

**Christina** · 14.08.2009, 09:13

Ja, ich weiß, ich weiß nur nicht was ich umpositionieren muß damit es im IE funktioniert. Es wird ja immer korrekt dargestellt außer bei den aktiven Menüpunkten, und da hab ich schon ewig gefummelt und finde keine Lösung...

Die aktiven Menüs sind ja nicht anders positioniert als der Rest, ich habe überhaupt keinen Plan woran es liegt...

Christina

**Sebastian** · 14.08.2009, 09:22

HI

vielleicht ist span.active nicht mit display:block versehen? Naja, du findest es schon heraus. Aber Achtung: Der IE6 kennt kein :hover, etc. bei span, li, usw.

Sebastian

**Christina** · 14.08.2009, 09:58

Ja, am Wochenende werde ich mich dem nochmal intensiv widmen - das sollte ja zu schaffen sein.
Vielen Dank für Deine Tipps & Unterstützung!

Christina

**Sebastian** · 14.08.2009, 10:32

HI

gerne doch & Viel Erfolg

Sebastian

**Mehlwurm** · 19.08.2009, 12:01

Zitat von Christina

Und ein Problem bleibt halt bestehen: wenn man auf einem Link verharrt, klappt die Liste zu wenn man sich dann weiterbewegt, man muß also die Maus ziemlich zügig durchziehen

Hi Christina,

hast Du hier eine Lösung gefunden?
Ich hab das gleiche Problem ;-)

www.e-watu.de/typolight

mfg

Markus

**Nils Riel** · 19.08.2009, 12:11

Ihr dürft zwischen den Listenpunkte kein margin verwenden, ansonsten verlasst ihr beim Überfahren dieser Lücke das "parent-li" - somit wird die Navigation geschlossen.

**Stephan** · 19.08.2009, 12:17

Hallo Markus,

bei dir liegt es daran, dass dein DIV mit der ID #left nur 220px breit ist, aber dein Menü rechts darüber hinaus aufklappt. Mit diesem Zusatz in deiner CSS-Datei legst du das Menü über das DIV mit der ID #main:

Code:

.mod_navigation li ul { z-index: 1; }

Edit: oder noch besser

Code:

#left .inside { z-index: 1; }

damit es auch der IE7 versteht.

**Christina** · 19.08.2009, 13:39

Hallo Mehlwurm,
nee, ich hab keine Lösung gefunden - aber auch nicht weiter gesucht, weil Sebastian schreibt bei ihm besteht das Problem nicht und hier bei mir (am Mac) in Safari auch nicht. Also hab ich mal beschlossen daß die Macuser mit Firefox damit leben müssen, ich hab nämlich keine Ahnung wie das Problem zu lösen wäre!

Allerdings habe ich auch nach wie vor keinen Lösungsansatz für dieses nervigen Abstand gefunden, der im IE6 und 7 zwischen der Hauptnavigation und der Subnavigation auftaucht wenn man über einen aktiven (also angeklickten) Link fährt... Wenn dazu jemand eine Idee hat wäre ich SEHR dankbar, ich bin ziemlich ratlos! Und wenn das so bleibt muß ich die Navigation ganz umbauen.

Viele Grüße!

Christina

**Mehlwurm** · 19.08.2009, 13:56

vielen dank stephan

jetzt hätte ich nur noch gern, dass ich nicht genau auf die schrift klicken muss, sondern dass auch das "feld" schon als link zählt?

ihr seid spitze

vg

Markus

**Stephan** · 19.08.2009, 14:01

Markus, nichts leichter als das.

Code:

 .mod_navigation a { display: block; }

**Mehlwurm** · 19.08.2009, 14:04

@stephan
wenn du kein kerl wärst, würd ich dich jetzt knutschen ;-)

**Stephan** · 19.08.2009, 17:21

@Markus: Es freut mich, dass es nun klappt!

@Christina: Nur mal auf die Schnelle. Dein Problem mit der Lücke ist meines Erachtens noch das kleinste Problem, das du hast. Die Lücke bekommst du weg, indem du dem aktiven Menüpunkt, der kein <a>-Tag mehr besitzt sondern nun von einem <span>-Tag eingeschlossen ist, genauso wie die Links behandelst:

Code:

.mod_navigation .active { display: block; }

Das größte Problem im IE7 ist aber, dass einige der ausgeklappten Menüpunkte nur schwer erreichbar sind bzw. zu schnell wieder zuklappen. Hiefür ist dein CSS-Code teilweise ungünstig geschrieben, so dass der IE7 Bugs, wie z.B. springende margins, produziert. Das ganze hat u.a. mit der Eigenschaft hasLayout zu tun. Probiere bitte mal folgendes für den IE7:

Code:

.mod_navigation li { width: 100%; vertical-align: bottom; }

Zum Schluss solltest du noch margin-left der Listen erhöhen, da die Menüpunkte nun die volle Größe besitzen:

Code:

.mod_navigation li ul { margin-left: 116px; }
.mod_navigation li ul ul { margin-left: 116px; }

Ansonsten würde ich für den IE 6 & 7 ein Extra-Stylesheet anlegen, die du mittels Conditional Comments ansprichst.

**Christina** · 20.08.2009, 16:44

Ich hab jetzt ".mod_navigation .active = display: block" probiert und schon geht die Lücke weg... ich hatte immer nur ".mod_navigation li .active" probiert, das ging irgendwie nicht, verflixt.

Den Rest werde ich noch mal sorgfältig überarbeiten wenn ich etwas mehr Ruhe habe, und dann auch ein extra-Stylesheet per Conditional Comment einbinden wie Du sagst. CSS ist doch trickreicher als gedacht!

Vielen herzlichen Dank - auch noch mal an Sebastian, der dem Problem ja schon auf der Spur war, nur war ich zu blöd die Lösung korrekt umzusetzen!

TYPOlight wäre ohne dieses tolle Forum wirklich nur halb so gut!

Christina