aleabodo/react-animated-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Classes renamed for global unique classes. zIndex bug fixed

Browse Source
This commit is contained in:
Alexander Bell
2018-06-21 22:27:58 -07:00
parent 30c0e5df0a
commit 78405274d3
3 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-animated-menus", "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.", "description": "React component that mounts three dot button that morphs into a menu by clicking on it.",
"main": "./lib/index.js", "main": "./lib/index.js",
"license": "MIT", "license": "MIT",

44
src/components/Menu.js
View File

@ -66,9 +66,9 @@ class App extends Component {
const id = this.id; const id = this.id;
//Targets that will be triggered //Targets that will be triggered
var targetDots = document.querySelectorAll('#'+id+' .Menu_dot'); var targetDots = document.querySelectorAll('#'+id+' .ram-Menu_dot');
var targetButton = document.querySelectorAll('#'+id+' .Menu_button'); var targetButton = document.querySelectorAll('#'+id+' .ram-Menu_button');
var targetMenu = document.querySelector('#'+id+'.Menu'); var targetMenu = document.querySelector('#'+id+'.ram-Menu');
@ -79,12 +79,11 @@ class App extends Component {
targetButton.forEach((element) => { targetButton.forEach((element) => {
element.style.display = "block"; element.style.display = "block";
}); });
targetMenu.forEach((element) => {
element.style.zIndex = 2000; targetMenu.style.zIndex = 2000;
})
//Remove hover effect //Remove hover effect
targetMenu.classList.remove("Menu_closed"); targetMenu.classList.remove("ram-Menu_closed");
animation animation
.add({ .add({
@ -102,7 +101,8 @@ class App extends Component {
easing: "easeOutCubic", easing: "easeOutCubic",
duration: 900 duration: 900
}, },
duration: 1200, duration: 400,
easing: "easeInOutCubic",
backgroundColor: "rgb(255, 255, 255)" backgroundColor: "rgb(255, 255, 255)"
}) })
.add({ .add({
@ -120,7 +120,7 @@ class App extends Component {
const color = this.getColor(); const color = this.getColor();
//Remove hover effect //Remove hover effect
targetMenu.classList.add("Menu_closed"); targetMenu.classList.add("ram-Menu_closed");
animation animation
.add({ .add({
@ -155,9 +155,9 @@ class App extends Component {
element.style.display = "none"; element.style.display = "none";
element.style.zIndex = 1; 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}; const styleFont = {fontSize: style.width};
return ( return (
<div style={style} id={this.id} className="Menu Menu_closed"> <div style={style} id={this.id} className="ram-Menu ram-Menu_closed">
<div className="Menu_dotBox"> <div className="ram-Menu_dotBox">
<div style={styleDot} className="Menu_dot Menu_dotA"> <div style={styleDot} className="ram-Menu_dot ram-Menu_dotA">
<div className="Menu_button" style={styleFont} onClick={this.props.food.a.action}> <div className="ram-Menu_button" style={styleFont} onClick={this.props.food.a.action}>
{this.props.food.a.value} {this.props.food.a.value}
</div> </div>
</div> </div>
</div> </div>
<div className="Menu_dotBox"> <div className="ram-Menu_dotBox">
<div style={styleDot} className="Menu_dot Menu_dotB"> <div style={styleDot} className="ram-Menu_dot ram-Menu_dotB">
<div className="Menu_button" style={styleFont} onClick={this.props.food.b.action}> <div className="ram-Menu_button" style={styleFont} onClick={this.props.food.b.action}>
{this.props.food.b.value} {this.props.food.b.value}
</div> </div>
</div> </div>
</div> </div>
<div className="Menu_dotBox"> <div className="ram-Menu_dotBox">
<div style={styleDot} className="Menu_dot Menu_dotC"> <div style={styleDot} className="ram-Menu_dot ram-Menu_dotC">
<div className="Menu_button" style={styleFont} onClick={this.props.food.c.action}> <div className="ram-Menu_button" style={styleFont} onClick={this.props.food.c.action}>
{this.props.food.c.value} {this.props.food.c.value}
</div> </div>
</div> </div>

22
src/styles/Menu.css
View File

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