diff --git a/package.json b/package.json index 997b395..faf8887 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-animated-menus", - "version": "1.0.14", + "version": "1.0.15", "description": "React component that mounts three dot button that morphs into a menu by clicking on it.", "main": "./lib/index.js", "license": "MIT", diff --git a/src/components/Menu.js b/src/components/Menu.js index f660787..af99695 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -66,9 +66,9 @@ class App extends Component { const id = this.id; //Targets that will be triggered - var targetDots = document.querySelectorAll('#'+id+' .Menu_dot'); - var targetButton = document.querySelectorAll('#'+id+' .Menu_button'); - var targetMenu = document.querySelector('#'+id+'.Menu'); + var targetDots = document.querySelectorAll('#'+id+' .ram-Menu_dot'); + var targetButton = document.querySelectorAll('#'+id+' .ram-Menu_button'); + var targetMenu = document.querySelector('#'+id+'.ram-Menu'); @@ -79,12 +79,11 @@ class App extends Component { targetButton.forEach((element) => { element.style.display = "block"; }); - targetMenu.forEach((element) => { - element.style.zIndex = 2000; - }) + + targetMenu.style.zIndex = 2000; //Remove hover effect - targetMenu.classList.remove("Menu_closed"); + targetMenu.classList.remove("ram-Menu_closed"); animation .add({ @@ -102,7 +101,8 @@ class App extends Component { easing: "easeOutCubic", duration: 900 }, - duration: 1200, + duration: 400, + easing: "easeInOutCubic", backgroundColor: "rgb(255, 255, 255)" }) .add({ @@ -120,7 +120,7 @@ class App extends Component { const color = this.getColor(); //Remove hover effect - targetMenu.classList.add("Menu_closed"); + targetMenu.classList.add("ram-Menu_closed"); animation .add({ @@ -155,9 +155,9 @@ class App extends Component { element.style.display = "none"; element.style.zIndex = 1; }); - targetMenu.forEach((element) => { - element.style.zIndex = 1; - }) + + targetMenu.style.zIndex = 1; + }; } } @@ -234,24 +234,24 @@ class App extends Component { const styleFont = {fontSize: style.width}; return ( -