• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] JONSUH's Hamburger Menü: hover statt click

M

Mufasa

New member
Hallo allerseits,

ich hänge hier gerade seit eniger Zeit an einem kleinen Problemchen und hoffe die Profis hier können mir hierbei etwas weiterhelfen. Für Euch ist das sicher eine Kleinigkeit, also bitte nicht lachen :)

Also ich habe das animierte Hamburger Menü von Jonsuh gefunden und möcht das verwenden. Allerdings würde ich die Animation gerne durch ein hover starten, statt durch den click. Das heißt wenn man drauf geht, wird die Animation gestartet und bleibt so, solange die Maus drauf ist. Sobald die Maus wegbewegt wird, soll es wieder zurück transformiert werden. Evtl. auch mit einem Hover auf ein anderes Element, bspw. den Titel, hier 'code' oder ein anderes div oder span.

Ich habe das Ganze mit mal mit mouseover/mouseout probiert, aber kriege es nicht hin damit das Menü zu triggern.

Freue mich über jede Hilfe.

Besten Dank im Voraus!!
LG
 
mikdoe schrieb:
und was bietest du touchdevices für eine alternative? die haben kein mouseover.
Zum Vergrößern anklicken....
Danke für die hilfreiche Antwort! Nein, hast schon Recht.... ;)

Bei Touchdevices brauche ich die Transofrmation gar nicht. Später sollen Touchdevices erkannt und dann dieser Effekt deaktiviert werden.

Erstmal würde ich das aber mal gerne so für normale Browser zum Laufen bringen. Kannst Du mir da weiterhelfen? :)
 
Randnotiz: Wie schön, dass die nächste Generation von Smartphones Hover kann (da kein direkter Kontakt mit der Oberfläche mehr nötig sein wird, um Interaktionen dieser Art durchzuführen).
 
kkapsner schrieb:
Zeig' doch mal, was du probiert hast.
Zum Vergrößern anklicken....
Hab ich leider wieder gelöscht, weil es nicht funktioniert hat..... :(

Den Mouseover-Effekt hab ich jetzt aber nochmal so verändert, dass es mit zwei unterschiedlichen Elementen funktioniert:
HTML: 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(one).mouseover(function(){
        $(two).css("background-color", "red");
    });
    $(one).mouseout(function(){
        $(two).css("background-color", "white");
    });
});
</script>
</head>
<body>

<p id="one">Hover here</p>
<p id="two">LOOK</p>

</body>
</html>

Aber wie ich das jetzt beim Hamburger Menu von Jonsuh anwenden.... da hänge ich wirklich komplett in der Luft :blue::crushed:
 
Zuletzt bearbeitet:
Mufasa schrieb:
funktioniert
Zum Vergrößern anklicken....
Der Code, den du hier zeigst, funktionier sicherlich nicht, da die Variabeln one und two nicht definiert sind... ;)

Soweit ich das in dem Beispiel sehe, funktioniert das einfach nur mit Änderungen der CSS-Klasse der Objekte. Ob du das jetzt mit onclick oder mit onmouseover machst, ist doch völlig egal.
 
kkapsner schrieb:
Der Code, den du hier zeigst, funktionier sicherlich nicht, da die Variabeln one und two nicht definiert sind... ;)
Zum Vergrößern anklicken....
Hmm.... probier das bitte mal aus, bei mir funktioniert das einwandfrei - genau so wie es ist. Mag sicher sein, dass das nicht optimal gemacht ist, aber läuft.... Soll ja jetzt auch nur ein Beispiel sein.

kkapsner schrieb:
Soweit ich das in dem Beispiel sehe, funktioniert das einfach nur mit Änderungen der CSS-Klasse der Objekte. Ob du das jetzt mit onclick oder mit onmouseover machst, ist doch völlig egal.
Zum Vergrößern anklicken....
Ja, natürlich beim oberen Beispiel ist es natürlich völlig egal..... das war wie gesagt auch nur ein Beispiel!

Es geht mir, wie eingangs geschrieben, um DIESES Hamburger Menü von Jonsuh. Dieses soll so mit hover getriggert werden wie in meinem oberen Beispiel.

Kannst Du mir dabei helfen? Mir zeigen wie es geht?
 
... oh Mann... alle Elemente mit ID als globale Variablen... manchmal verstehe ich wirklich nicht, was sich die Browserentwickler bei manchen Dingen gedacht haben...

OK - dein Beispiel funktioniert, ist aber ganz sicher nicht optimal gemacht.

Mufasa schrieb:
Ja, natürlich beim oberen Beispiel ist es natürlich völlig egal..... das war wie gesagt auch nur ein Beispiel!
Zum Vergrößern anklicken....
Ich meinte nicht dein Codebeispiel, sondern den ersten Link in deinem ersten Post. Auch da sollte es egal sein, wie du die CSS-Klasse setzt.
 
kkapsner schrieb:
Ich meinte nicht dein Codebeispiel, sondern den ersten Link in deinem ersten Post. Auch da sollte es egal sein, wie du die CSS-Klasse setzt.
Zum Vergrößern anklicken....

Ok, dann sprechen wir sicher über das Gleiche :)

Also das original Javascript ganz unten im html ist ja dieses
Code: 
<script>
var forEach=function(t,o,r) {
	if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)
};

var hamburgers = document.querySelectorAll(".hamburger");
	if (hamburgers.length > 0) {
		forEach(hamburgers, function(hamburger) {
			hamburger.addEventListener("click", function() {
				this.classList.toggle("is-active");
			}, false);
		});
	}
</script>

Wenn ich jetzt "click" ersetze mit "mouseOver", dann reagiert der schon mal, aber wie/wo ergänze ich das mouseOut-Event? :confused::confused:
Das nächste Problem ist, dass ich das Event beim Hover eines anderen Elements auslösen möchte. Das heißt wenn ich mit der Maus auf die Beschriftung (hier "code") gehe, soll die Transformation ausgelöst werden. Beim Verlassen der Beschriftung dann entsprechend wieder zurück. :confused:
 
Man kann ja mehrere eventlistener auf ein Objekt legen,
bei deinem Script könnte sich das toggle sogar so auswirken das du nur den Listener einmal mit mouseover und einmal mit mouseout zu sezten brauchst.

PHP: 
if (hamburgers.length > 0) {
		forEach(hamburgers, function(hamburger) {
			hamburger.addEventListener("mouseover", function() {this.classList.add("is-active");}, false);
        hamburger.addEventListener("mouseout", function() {this.classList.remove("is-active");}, false);
		});
	}

also so in dieser Richtung könnte es gehn.
 
Mufasa schrieb:
wie/wo ergänze ich das mouseOut-Event?
Zum Vergrößern anklicken....
Die drei Zeilen duplizieren und mouseout in den Eventnamen reinschreiben...?

Mufasa schrieb:
Das nächste Problem ist, dass ich das Event beim Hover eines anderen Elements auslösen möchte.
Zum Vergrößern anklicken....
Dann musst du zuerst den Selektor für die "hamburger" ändern und dann im Eventlistener darfst du nicht mit this arbeiten, sondern musst die die passende Node holen. Da wir deine HTML-Struktur nicht kennen, können wir dir auch nicht helfen, wie du genau da hinkommst.

PS: es heßt mouseover und mouseout.
 
andreax schrieb:
also so in dieser Richtung könnte es gehn.
Zum Vergrößern anklicken....
YEEEAH! Danke schön. Kaum macht man's richtig schon geht's ;) haha :applause::applause:
Das mit add() und remove() muss ich mir demnächst nochmal genau anschauen :)

Ok dann ist jetzt der Punkt die Animation von einem anderen Element aus auszulösen.
kkapsner schrieb:
Dann musst du zuerst den Selektor für die "hamburger" ändern und dann im Eventlistener darfst du nicht mit this arbeiten, sondern musst die die passende Node holen.
Zum Vergrößern anklicken....
Hab das so versucht..... aber wo ist denn der Haken? Das klappt so nicht ganz
PHP: 
var hamburgers = document.querySelectorAll(".hamburger");
var menulabel = document.querySelectorAll(".code");

if (hamburgers.length > 0) {
	forEach(hamburgers, function(hamburger) {
		menulabel.addEventListener("mouseover", function() {hamburgers.classList.add("is-active");}, false);
		menulabel.addEventListener("mouseout", function() {hamburgers.classList.remove("is-active");}, false);
	});
}


kkapsner schrieb:
PS: es heßt mouseover und mouseout.
Zum Vergrößern anklicken....
mikdoe schrieb:
wo hat er das falsch?
Zum Vergrößern anklicken....
OK, ich denke mal klapsner meinte das "große O".... hatte mouseOver und mouseOut geschrieben.
Ist das hierbei denn wichtig?? Habe das nämlich schon oft so und so gesehen.


_________
Edit:
Achso, könntet Ihr mir bitte irgendwie verständlich machen was genau die folgenden drei Zeilen machen? Will es ja auch wirklich verstehen....
PHP: 
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
und
PHP: 
if (hamburgers.length > 0) {
	forEach(hamburgers, function(hamburger) {
		...
		...
	});
}
 
Zuletzt bearbeitet:
Mufasa schrieb:
aber wo ist denn der Haken?
Zum Vergrößern anklicken....
Der sollte in der Fehlerkonsole stehen... menuLabel hat einfach keine Eigenschaft addEventListener, sondern die Elemente innerhalb der HTML-Collection. ABER ich würde das sowieso anders machen. Ich würde nicht das erste .code mit dem ersten .hamburger verheiraten, sondern von dem .hamburger relativ zum .code gehen (wie das geht können wir leider nicht sagen, da wir das HTML immer noch nicht kennen...). So bis du viel wengier fehleranfällig.

Mufasa schrieb:
Ist das hierbei denn wichtig?? Habe das nämlich schon oft so und so gesehen.
Zum Vergrößern anklicken....
In JS ist das wichtig, da es case-sensitiv ist. HTML ist das nicht.

Mufasa schrieb:
Achso, könntet Ihr mir bitte irgendwie verständlich machen was genau die folgenden drei Zeilen machen?
Zum Vergrößern anklicken....
Das forEach iteriert durch das übergebene Objekt und führt auf jedem Element darin die Callbackfunktion aus. Versucht eigentlich ARRAY.forEach() nachzubilden und auf Objekte auszuweiten - bin mir noch nicht sicher, ob ich diesen Ansatz gut finden soll. Ich würde bei einem Arraylike direkt mit Array.prototype.forEach.call arbeiten. Ist zwar etwas länger, aber dafür weiß man genau, was es tut.

PS:
Mufasa schrieb:
klapsner
Zum Vergrößern anklicken....
mein Benutzername scheint echt schwierig zu sein...
 
kkapsner schrieb:
menuLabel hat einfach keine Eigenschaft addEventListener, sondern die Elemente innerhalb der HTML-Collection.
Zum Vergrößern anklicken....
Was meinst Du mit "Elemente innerhalb der HTML-Collection"?

kkapsner schrieb:
ABER ich würde das sowieso anders machen. Ich würde nicht das erste .code mit dem ersten .hamburger verheiraten, sondern von dem .hamburger relativ zum .code gehen (wie das geht können wir leider nicht sagen, da wir das HTML immer noch nicht kennen...). So bis du viel wengier fehleranfällig.
Zum Vergrößern anklicken....
Ok.... JETZT weiß ich wirklich nicht mehr was Du meinst mit "von dem .hamburger relativ zum .code" gehen. :confused::confused:

Das HTML ist eigentlich derzeit noch ganz ganz simpel aufgebaut und besteht eigentlich nur aus dem Menü-Icon:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/hamburgers.css" />
		<style>
			body {background-color: #fff;}
	    		code, .code {display: inline-block;}
	    		code, .hamburger {vertical-align: middle;}
	  	</style>
	</head>
	<body>
		<div class="codrops-top clearfix">
			<span>
				<div class="hamburger hamburger--arrow">
					<div class="hamburger-box">
						<div class="hamburger-inner"></div>
					</div>
				</div>
				<code class="code">Menu</code>
			</span>
		</div>

		<script>
			var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

			var hamburgers = document.querySelectorAll(".hamburger");
			var menulabel = document.querySelectorAll(".code");
			
			if (hamburgers.length > 0) {
				forEach(hamburgers, function(hamburger) {
					hamburger.addEventListener("mouseover", function() {hamburger.classList.add("is-active");}, false);
					hamburger.addEventListener("mouseout", function() {hamburger.classList.remove("is-active");}, false);
				});
			}
		</script>
	</body>
</html>

kkapsner schrieb:
In JS ist das wichtig, da es case-sensitiv ist. HTML ist das nicht.
Zum Vergrößern anklicken....
Alles klara ;)

kkapsner schrieb:
Das forEach iteriert durch das übergebene Objekt und führt auf jedem Element darin die Callbackfunktion aus. Versucht eigentlich ARRAY.forEach() nachzubilden und auf Objekte auszuweiten - bin mir noch nicht sicher, ob ich diesen Ansatz gut finden soll. Ich würde bei einem Arraylike direkt mit Array.prototype.forEach.call arbeiten. Ist zwar etwas länger, aber dafür weiß man genau, was es tut.
Zum Vergrößern anklicken....
Danke! Ja forEach an sich kenne ich schon.... nur der Funktionsweise in DIESEM konkreten Fall hat sich mir nicht erschlossen (und ehrlich gesagt noch immer nicht so ganz richtig) weil ich hier kein Array sehe. Für nur so ein simples Menü-Icon braucht man doch kein Array.... denke ich :)


kkapsner schrieb:
PS: mein Benutzername scheint echt schwierig zu sein...
Zum Vergrößern anklicken....
Na jetzt wo Du es sagst.... kommt das öfter vor? haha! Ja, habe das zweite 'k' irgendwie als 'l' gelesen.
 
Mufasa schrieb:
Was meinst Du mit "Elemente innerhalb der HTML-Collection"?
Zum Vergrößern anklicken....
document.querySelectorAll() gibt eine HTML-Collection zurück, die die ganzen Elemente, die auf den Selektor passen, zurück.

Mufasa schrieb:
Das HTML ist eigentlich derzeit noch ganz ganz simpel aufgebaut und besteht eigentlich nur aus dem Menü-Icon
Zum Vergrößern anklicken....
Das hatte ich schon erwartet, aber für einen dedizierte Antwort mussten wir das kennen. So kannst du von deinem .hamburger so zum .code kommen:
Code: 
var code = hamburger.parentNode.querySelector(".code");

Mufasa schrieb:
weil ich hier kein Array sehe
Zum Vergrößern anklicken....
Ist ja auch kein Array, sondern eine HTML-Collektion - also ein Arraylike.

Mufasa schrieb:
Für nur so ein simples Menü-Icon braucht man doch kein Array
Zum Vergrößern anklicken....
Arrays machen vieles einfacher und können bei jedem, noch so einfachen Problem verwendet werden. Kosten ja auch nicht viel.

Mit diesen Informationen würde ich das jetzt so schreiben:
Code: 
			Array.prototype.forEach.call(
				document.querySelectorAll(".hamburger"),
				function(hamburger){
					var code = hamburger.parentNode.querySelector(".code");
					code.addEventListener("mouseover", function(){
						hamburger.classList.add("is-active");
					}, false);
					code.addEventListener("mouseout", function(){
						hamburger.classList.remove("is-active");
					}, false);
				}
			);
- ungetestet.

Mufasa schrieb:
kommt das öfter vor?
Zum Vergrößern anklicken....
Ja.
 
Code: 
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);

else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

Ich sehe dieses Konstrukt bisschen kritischer .
"[object Object]"===Object.prototype.toString.call(t) mir scheint diese Auswertung endet immer auf false, und dann wird der else Zweig gestarted.
ausserdem diese forEach Funktion verlangt nach 3 Parametern es werden aber hier nur 2 übergeben.
Egal wenn es funktioniert, ist eben nur mein mangeldes now how.


Du willst ein Element mit einem listener belegen und die Aktion soll mit einem Anderen Element stattfinden.
hamburger.addEventListener("mouseover", function() {anderesElement.classList.add("is-active");}, false);
 
Zuletzt bearbeitet von einem Moderator:
@kkapsner danke !

@Mufasa : kannst du noch beschreiben wo das Element im Dokument ist den wenn es innerhalb der NodeList von hamburger liegt könnte man eventuell ein hover mit css anlegen und braucht gar kein js
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben