diff --git a/package.json b/package.json index e638628..9a64b64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-animated-menus", - "version": "1.0.12", + "version": "1.0.13", "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 f9c581e..f59cfb6 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -75,10 +75,14 @@ class App extends Component { if(this.open) { var animation = anime.timeline(); - //Display buttons + //Styles targetButton.forEach((element) => { element.style.display = "block"; + element.style.zIndex = 1000; }); + targetDots.forEach((element) => { + element.style.zIndex = 1000; + }) //Remove hover effect targetMenu.classList.remove("Menu_closed"); @@ -97,9 +101,9 @@ class App extends Component { borderRadius: { value: 0, easing: "easeOutCubic", - duration: 500 + duration: 900 }, - duration: 1000, + duration: 1200, backgroundColor: "rgb(255, 255, 255)" }) .add({ @@ -150,7 +154,11 @@ class App extends Component { animation.complete = function() { targetButton.forEach((element) => { element.style.display = "none"; + element.style.zIndex = 1; }); + targetDots.forEach((element) => { + element.style.zIndex = 1; + }) }; } } diff --git a/src/styles/Menu.css b/src/styles/Menu.css index 222810a..6993966 100644 --- a/src/styles/Menu.css +++ b/src/styles/Menu.css @@ -4,6 +4,7 @@ overflow: visible; transition: opacity 0.5s; cursor: pointer; + z-index: 1; } .Menu_closed:hover {