Sponsored Links |
|
||||
SELFHTML: JavaScript / Objektreferenz / window
Dort findest Du schonmal eine Möglichkeit, wie Du JS-Code nach einer gewissen Zeit ausführen kannst. Ich würde mir Funktionen zum ein-/ausblenden von Menü(-abschnitten) schreiben und diese dann jeweils über die setTimeout aufrufen. SELFHTML: JavaScript / Objektreferenz / window Und hier hast Du eine Möglichkeit einen "Timer" wieder zu entfernen. Du kannst z.B. beim Verlassen des Menüs 'nen Timeout mit 500ms erstellen, der dann das Menü schliesst. Und wenn innerhalb der 500ms die Maus wieder über dem Menü ist, dann entfernst Du diesen wieder. Ich hab' mich auch mal damit beschäftigt, aber ist schon ne ganze Weile her, und JS ist für mich leider nicht alltäglich, so dass ich Dir leider nicht auf die Schnelle irgendein Beispiel "hinzaubern" kann. Evtl. stellt JQuery noch eine Option dar. Habe selbst noch nichts damit gemacht, aber ist wohl nicht ohne Grund sehr angesagt. |
Sponsored Links |
|
||||
Hello!
Das mit der Verzögerung des "Untermenü-aufklappen" hat bereits geklappt - dankeschön. Jetzt fehlt mir nur noch ein Ansatz, wie die Elemente untereinander erst mit Verzögerung ge"hover"d werden können. Wenn ich mit dem Mauszeiger über einem Element bin und dann auf eines höher wechsle, soll das obige erst mit Verzögerung ge"hover"d werden. Verstanden? Ich hoffe, ihr habt einen guten Lösungsansatz für mich |
|
||||
Ja, so in etwa hab ich das gemeint
In der angehängten Grafik siehst du vielleicht besser, was ich meine. Der Menüpunkt soll erst nach beispielsweise 500 Millisekunden ge"hover"d werden (Farbwechsel+eventuelles Öffnen von Untermenüs) Und wie gesagt.. ich bin leider ein Javascript-Anfänger *schäm* |
|
||||
Naja, dass das Untermenü verzögert geöffnet wird, hast Du ja schon geschafft, wie Du schreibst.
Ich nehme mal an, dass Du den Hover-Effekt im Moment per CSS realisierst und zwar mit ":hover", was sofort angezeigt wird. Wenn Du diese Angaben jetzt nicht in ":hover" notiert, sondern dafür eine eigene Klasse angibst, dann kannst Du mit "elementname.className = 'HoverKlasse';" die CSS-Klasse ändern. Dies dann ebenfalls mit z.B. setTimeout etsprechend verzögert aufrufen. |
|
||||
Geschafft habe ich die Verzögerung des Untermenü-Schliessens, das aber durch die CMS-Konfigurationssprache (Typoscript).
Zum verzögerten Aufrufen bin ich nicht gekommen. Wenn ich das hinbekomme, so wie du beschrieben hast, wird dann ein Untermenü auch verzögert aufgerufen? Ich versuche mal einen einfachen Testcase zu erstellen. EDIT: Naja, das mit dem Testcase verläuft nicht so rosig. Für das hab ich leider zu wenig Kenntnisse im Umgang mit Javascript. Bin gerade dabei, mit ein paar kleinen Schritt-für-Schritt-Tutorials zu lernen. Wär es dir möglich, das Ganze in einem einfachen Beispielmenü darzustellen? Geändert von grischa_sgd (02.06.2008 um 11:43 Uhr) |
|
||||
Ich hab's jetzt nur mal von der Idee her "skizziert".
Für die Haupt-Navi-Punkte wird gehovered und das Untermenü wird eingeblendet. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>[ untitled ]</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; width: 100px; background: #FFF; border: 2px outset #FFF; } li { display: block; } li ul { display: none; } li.myHover { color: highlighttext; background: highlight; } li.myHover ul { position: absolute; left: 90%; top: 10%; display: block; } </style> <script type="text/javascript"> function hover_me(el) { window.setTimeout("document.getElementById('" + el.getAttribute('id') + "').className='myHover';", 500); } function unhover_me(el) { window.setTimeout("document.getElementById('" + el.getAttribute('id') + "').className='';", 500); } </script> </head> <body> <ul> <li id="p1" onmouseover="hover_me(this);" onmouseout="unhover_me(this);"> Punkt 1 <ul> <li>Punkt 1.1</li> <li>Punkt 1.2</li> </ul> </li> <li id="p2" onmouseover="hover_me(this);" onmouseout="unhover_me(this);">Punkt 2</li> </ul> </body> </html> Man könnte das Untermenü ebenfalls per JS über einen eigenen Timmer anzeigen, hab' ich mir jetzt aber gespart. Ich bin leider auch nicht wirklich fit in Javascript. |
Sponsored Links |
|
||||
Danke viiiiiielmals!
Das hilft mir immens weiter! Jetzt verstehe ich auch die Zusammenhänge zwischen setTimeout und dem Setzen der Klasse. Ich melde mich, wenns geklappt hat. Nochmals vielen Dank! |
Sponsored Links |
Stichwörter |
delay, javascript, menü, windows |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Javascript - Menü, ausfahrbar, bei Klick andere Menüpunkte sollen einfahren | ArcVieh | Javascript & Ajax | 4 | 18.09.2010 00:17 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
Menü austauschen mit JavaScript | Lestat | Javascript & Ajax | 1 | 09.09.2006 11:33 |
JavaScript - keine Menü und Adressleiste | fabske | Javascript & Ajax | 9 | 20.04.2006 12:00 |
verschachtelte divs, javascript menü - firefox macht ärger | fork | (X)HTML | 14 | 05.11.2005 12:35 |