I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition. How can I achieve this effect? Is there a way to remove elements from view without actually removing them from the DOM temporarily? Thank you! Please refer to the code snippet below for a similar setup that I currently have in place.
class Comp extends React.Component {
constructor() {
super();
this.state = {
clicked: false,
divId: "off"
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({clicked: !this.state.clicked});
if (this.state.divId == "on") {
this.setState({divId: "off"});
} else {
this.setState({divId: "on"});
}
}
render() {
return (
<div>
<div id={this.state.divId}></div>
<button onClick={this.handleClick}>Click Me</button>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
</div>
);
}
}
ReactDOM.render(<Comp />, app);#div1 {
background-color: red;
height: 100px;
width: 100px;
margin-bottom: 15px;
}
button {
position: absolute;
z-index: 2;
}
#on {
background-color: green;
position: absolute;
transition: height ease 0.5s;
z-index: 1;
width: 100%;
height: 100%;
}
#off {
background-color: green;
position: absolute;
z-index: 1;
transition: height ease 0.5s;
width: 100%;
height: 0%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>