zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Menü mit Javascript mit "Windows-Verhalten"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.05.2008, 09:59
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Beitrag Menü mit Javascript mit "Windows-Verhalten"

Hallo zusammen!

Ich versuche zurzeit ein Menü (mit verschachtelten UL/LI) mit Javascript zu erstellen. Es soll ein Verhalten wie die Windows-Menüs haben. Darunter fallen die Verzögerung beim Wechseln von Menüpunkten und die Verzögerung des Schliessens beim (versehentlichen) Verlassen des Menüs. Ich denke, alle Windows-User kennen den Effekt.

[wechseln von Menüpunkt 1.Ebene] > 500ms > [Untermenü öffnen]
[Mausbewegung aus Menübereich des Menüpunkts] > 500ms > Schliessen
[wechseln von Menüpunkt 1.Ebene] > 500ms > [Untermenü öffnen]

Bei Google-Recherchen habe ich Menüs gefunden, die zwar Teile meiner Idee umsetzen, aber nicht ganz so funktionieren, wie ich will.

Nun bin ich noch nicht so gewandt im Umgang mit Javascript - ich kann Funktionen lesen, aber eine schreiben ist noch zu hoch.
Kennt jemand ein Script oder kann mir einfache Lösungsansätze geben (möchte auch etwas dabei lernen )?


Herzlichen Dank und bei für weitere Fragen einfach schreiben

greets grischa

Geändert von grischa_sgd (27.05.2008 um 10:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.05.2008, 11:01
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.05.2008, 15:22
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

Danke vielmals! Ich bin dran, eine Variante der von dir genannten Lösung umzusetzen.

jQuery klingt auch noch interessant!

Auf jeden Fall schon mal ein herzliches Dankeschön für die rasche Hilfe!
Mit Zitat antworten
  #4 (permalink)  
Alt 02.06.2008, 11:48
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 02.06.2008, 11:55
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Nö, nix verstanden.

Soll der Menüpunkt, über den die Maus fährt verzögert markiert werden?
Mit Zitat antworten
  #6 (permalink)  
Alt 02.06.2008, 12:08
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

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*
Angehängte Grafiken
Dateityp: jpg menu-delay.jpg (11,3 KB, 8x aufgerufen)
Mit Zitat antworten
  #7 (permalink)  
Alt 02.06.2008, 12:15
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 02.06.2008, 12:19
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

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 12:43 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 02.06.2008, 13:47
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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>
Die CSS-Klasse wird zeitversetzt geändert, dadurch wird gleichzeitig die Hervorhebung realisiert, sowie das Untermenü angezeigt.
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.06.2008, 14:10
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
delay, javascript, menü, windows

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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 01:17
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Menü austauschen mit JavaScript Lestat Javascript & Ajax 1 09.09.2006 12:33
JavaScript - keine Menü und Adressleiste fabske Javascript & Ajax 9 20.04.2006 13:00
verschachtelte divs, javascript menü - firefox macht ärger fork (X)HTML 14 05.11.2005 13:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:13 Uhr.