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 ( -
-
-
-
+
+
+
+
{this.props.food.a.value}
-
-
-
+
+
+
{this.props.food.b.value}
-
-
-
+
+
+
{this.props.food.c.value}
diff --git a/src/styles/Menu.css b/src/styles/Menu.css index 6993966..2c7e605 100644 --- a/src/styles/Menu.css +++ b/src/styles/Menu.css @@ -1,4 +1,4 @@ -.Menu { +.ram-Menu { position: relative; background-color: transparent; overflow: visible; @@ -7,18 +7,18 @@ z-index: 1; } -.Menu_closed:hover { +.ram-Menu_closed:hover { opacity: 0.7; } -.Menu_dotBox { +.ram-Menu_dotBox { position: relative; width: 100%; height: 33.3333%; background-color: transparent; } -.Menu_dot { +.ram-Menu_dot { position: absolute; width: 600%; height: 500%; @@ -37,21 +37,21 @@ .Menu_dotC { transform: translateY(157%) scale(1,1); }*/ -.Menu_dotA { +.ram-Menu_dotA { transform: translate(-44.5%, -44%) scale(0.1,0.14); } -.Menu_dotB { +.ram-Menu_dotB { transform: translate(-44.5%, -44%) scale(0.1,0.14); } -.Menu_dotC { +.ram-Menu_dotC { transform: translate(-44.5%, -44%) scale(0.1,0.14); } -.Menu:hover .Menu_dot { +.ram-Menu:hover .Menu_dot { opacity: 1; } -.Menu_button { +.ram-Menu_button { position: relative; display: none; width: 100%; @@ -66,11 +66,11 @@ padding-top: 25%; color: rgb(60, 60, 60); } -.Menu_button:hover { +.ram-Menu_button:hover { background-color: rgb(240, 240, 240); padding-left: 10%; } -.Menu_button:active { +.ram-Menu_button:active { transition: background-color 0.1s; background-color: rgb(207, 207, 207); }