Dropdown on a longer web-page

Question

I want to render a dropdown menu just like this webpage such that when the when the dropdown, it covers up the entire web page, removes the scroll bar, and unmounts(?) the rest of the web page, but during this transition you still see the entire web page. How would I be able make this feature happen? Is there someway of unmounting elements but still showing them for a while? Thanks! Please see the snippet below for something similar to what I currently have working.

 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> 

Answer 1

To hide and show the scrollbar. See the comments in the code.

 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"}); document.body.classList.remove("scrollbar-hide");//Remove CSS class } else { this.setState({divId: "on"}); document.body.classList.add("scrollbar-hide"); //Add CSS class } } 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%; } /* CSS class to remove scrollbar. */ .scrollbar-hide { overflow: hidden; } 

 <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>