Mufasa Posted July 31, 2016 Share Posted July 31, 2016 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 More sharing options...
justsomeguy Posted August 1, 2016 Share Posted August 1, 2016 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. Link to comment Share on other sites More sharing options...
Mufasa Posted August 1, 2016 Author Share Posted August 1, 2016 Thank you for reply. Do you mean that page? https://github.com/jonsuh/hamburgers Which javascript would that be? Can you post it here for me? Thanks! Link to comment Share on other sites More sharing options...
justsomeguy Posted August 1, 2016 Share Posted August 1, 2016 The dist folder contains the CSS and an example HTML page. Link to comment Share on other sites More sharing options...
Mufasa Posted August 1, 2016 Author Share Posted August 1, 2016 yeeeeeah, that I know! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 2, 2016 Share Posted August 2, 2016 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 More sharing options...
Mufasa Posted August 2, 2016 Author Share Posted August 2, 2016 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 More sharing options...
justsomeguy Posted August 2, 2016 Share Posted August 2, 2016 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 More sharing options...
dsonesuk Posted August 2, 2016 Share Posted August 2, 2016 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()). Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now