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.