Jump to content

JONSUH Hamburgers 'hover' instead 'click'


Mufasa

Recommended Posts

Hello everybody,

 

I've got a little problem that I cannot get working. Hope you experts here could help me out with this.

 

I found this hamburger menu animation by Jonsuh: https://jonsuh.com/hamburgers

 

That thing is really nice. Now I want to trigger the animation on hover instead of click. I'd like to hover another item (e.g. 'code') and trigger the animation. Hovering 'code' would start animation and leaving the item would transform hamburger back.

 

I tried it with the mouseover/mouseout function.... but don't know how to get this working with hamburger.

 

I'd really appreciate every help and info.

 

Thanks in advance!

 

Link to comment
Share on other sites

but! you need click for mobile device touch screen to expand menu, IF you are using for menu? I foresee problem with having need for both, one will cancel out other, hover runs animation to end result, then click will cause it to return to original state, you really need to think this through and consider this.

Link to comment
Share on other sites

Thank you for your note. Well yeah, if I can manage to get this damn thing working somehow then I want to use it for menu. The Hamburger Menu will have a label, for example "Menu". On normal pc monitor the animation shall be triggered by hovering the label and open menu by hovering the Hamburger Menu Icon. I don't want the need to click the icon. But on mobile devices it will be standard.... - No Label, No hover functionality and menu opens on click.

 

This is my wish. But I am becoming desperate with this thing :(

 

There's javascript at the bottom of the html which triggers the animation on click:

<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>

Now when I replace "click" with "mouseOver" the animation starts when I hover over the Menu Icon, but how do I have to include the mouseOut-Event??

 

Also there is the next problem that I'd like to trigger the event by hovering another element and not the Menu Icon itself. As I said when I hover the label (here: 'code') the animation should be triggered.

Link to comment
Share on other sites

Add a mouseout event that does the same thing (since the only thing that handler does is toggle a class). If you want the event to fire on another element then just change that part of the code. That code gets every element with the class "hamburger", loops through them, and adds the event handler to each one. If you want the event to happen on another element then change the selector. If you want it to happen on only a single element then you don't need all of that code with the loop, you can just target the specific element and add the mouseover and mouseout handlers to it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...