Abstract
Hello everyone it’s me candle. In this time we will make a most simple drop down menu.
Condition
- Knowledge of react
Preparation
We create a react project with the below command.
create-react-app hello-menu
Open src/App.js
and write this.
import React, { Component } from 'react' class App extends Component { render() { return ( <div> <p>hello menu</p> </div> ) } } export default App
Create a components
directory in the src
directory.
mkdir src/components
Create a DropDownMenu.js
file in the src/components
directory.
touch src/components/DropDownMenu.js
Now on ready.
Create a Drop down menu
Open the src/components/DropDownMenu.js
and write these.
import React from 'react' class DropDownMenu extends React.Component { constructor(props) { super(props) this.state = { listOpen: false, } } toggleList() { this.setState(prevState => ({ listOpen: !prevState.listOpen, })) } handleClickMenu(val) { this.setState({ listOpen: false, }) alert(val) } render() { const { listOpen } = this.state return ( <div style={styles.dropDownMenu}> <div onClick={this.toggleList.bind(this)} style={styles.menuButton}> menu </div> {listOpen && ( <div style={styles.menuBox}> <div style={styles.menuContent}> <div onClick={this.handleClickMenu.bind(this, 1)}>menu 1</div> </div> <div style={styles.menuContent}> <div onClick={this.handleClickMenu.bind(this, 2)}>menu 2</div> </div> <div style={styles.lastMenuContent}> <div onClick={this.handleClickMenu.bind(this, 3)}>menu 3</div> </div> </div> )} </div> ) } } const styles = { dropDownMenu: { position: 'relative', }, menuButton: { display: 'inline', cursor: 'pointer', border: '1px solid black', padding: '3px 5px', }, menuBox: { position: 'absolute', top: '23px', width: '120px', zIndex: 1, cursor: 'pointer', border: '1px solid black', }, menuContent: { padding: '3px 5px', borderBottom: '1px solid black', }, lastMenuContent: { padding: '3px 5px', }, } export default DropDownMenu
Next open the src/App.js
and edit like this.
import React, { Component } from 'react' import DropDownMenu from './components/DropDownMenu' class App extends Component { render() { return ( <div> <p>hello menu</p> <DropDownMenu /> </div> ) } } export default App
Launch server.
yarn run start
Click the “menu” button and the menu appears, and click the “menu” button again then close it.
Click the contents of menu, an alert window displays and close the dropdown menu.
Click outside the menu to close
After clicking the “menu” button, you need to click the “menu” button again to close it again. But many sites tend to be closed easily by clicking on other parts.
You can make it using react-onclickoutside easily.
yarn add react-onclickoutside
Open src/components/DropDownMenu.js
and edit.
Write this at the top of file.
import onClickOutside from 'react-onclickoutside'
Create a new function.
handleClickOutside() { this.setState({ listOpen: false, }) }
Edit the part of export default DropDownMenu
at the bottom of file.
export default onClickOutside(DropDownMenu)
Please check with the browser. After opening the menu, click on the outside to close the menu.
This is the finished code.
import React from 'react' import onClickOutside from 'react-onclickoutside' class DropDownMenu extends React.Component { constructor(props) { super(props) this.state = { listOpen: false, } } toggleList() { this.setState(prevState => ({ listOpen: !prevState.listOpen, })) } handleClickMenu(val) { this.setState({ listOpen: false, }) alert(val) } handleClickOutside() { this.setState({ listOpen: false, }) } render() { const { listOpen } = this.state return ( <div style={styles.dropDownMenu}> <div onClick={this.toggleList.bind(this)} style={styles.menuButton}> menu </div> {listOpen && ( <div style={styles.menuBox}> <div style={styles.menuContent}> <div onClick={this.handleClickMenu.bind(this, 1)}>menu 1</div> </div> <div style={styles.menuContent}> <div onClick={this.handleClickMenu.bind(this, 2)}>menu 2</div> </div> <div style={styles.lastMenuContent}> <div onClick={this.handleClickMenu.bind(this, 3)}>menu 3</div> </div> </div> )} </div> ) } } const styles = { dropDownMenu: { position: 'relative', }, menuButton: { display: 'inline', cursor: 'pointer', border: '1px solid black', padding: '3px 5px', }, menuBox: { position: 'absolute', top: '23px', width: '120px', zIndex: 1, cursor: 'pointer', border: '1px solid black', }, menuContent: { padding: '3px 5px', borderBottom: '1px solid black', }, lastMenuContent: { padding: '3px 5px', }, } export default onClickOutside(DropDownMenu)
Conclusion
When you use it in your project, you should edit the design, and use in combination with other libraries, for example link of react-router. Please challenge and try creating an easy-to-use drop down menu.