Jump to content
Mufasa

JONSUH Hamburgers 'hover' instead 'click'

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!

 

Share this post


Link to post
Share on other sites

On the example HTML page in their Github repository, there is some Javascript code at the bottom which adds a CSS class on click. You can change that click event to any other event.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

You need to replace .toggle() with add() for mouseover, and remove() for mouseout see http://www.w3schools.com/jsref/prop_element_classlist.asp.

 

you copy the code which adds the event, and paste below the end ...false); so both are within forEach loop, then adjust one for mouseover (with add()), one for mouseout (with remove()).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...