₦airaland Forum

[url=]Crhttps://www.skptricks.com/2018/05/create-dropdown-using-reactjs.htmlate A Dropdown Menu Using ReactJS[/url]

https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html

Today, In this tutorial we are are going to discuss how to create simple drop down menu in ReactJS and we have tried our best to make this tutorial as simple as possible. Here we are going to design CSS Dropdown menu with the help of ReactJS and also with the help of onClick Event, we are showing and hiding the drop down menu content.

Dropdown Examples with ReactJS

React dropdown menu tutorial
Lets see the below source code, which help you to build more understanding:

Project Structure :
Lets see the project structure :
Create a Dropdown Menu in ReactJS


Dropdown.js
This is a Dropdown component class, which help us to render the dropdown menu content. When user click on the dropdown menu, then this component class render the updated dropdown menu list in browser.

showDropdownMenu : This method helps to display the dropdown menu content.
hideDropdownMenu : This method helps to hide the dropdown menu content.

import React from 'react';
import './style.css';


class Dropdown extends React.Component {
constructor(){
super();

this.state = {
displayMenu: false,
};

this.showDropdownMenu = this.showDropdownMenu.bind(this);
this.hideDropdownMenu = this.hideDropdownMenu.bind(this);

};

showDropdownMenu(event) {
event.preventDefault();
this.setState({ displayMenu: true }, () => {
document.addEventListener('click', this.hideDropdownMenu);
});
}

hideDropdownMenu() {
this.setState({ displayMenu: false }, () => {
document.removeEventListener('click', this.hideDropdownMenu);
});

}

render() {
return (
<div className="dropdown" style = {{background:"red",width:"200px"}} >
<div className="button" onClick={this.showDropdownMenu}> My Setting </div>

{ this.state.displayMenu ? (
<ul>
<li><a className="active" href="#Create Page">Create Page</a></li>
<li><a href="#Manage Pages">Manage Pages</a></li>
<li><a href="#Create Ads">Create Ads</a></li>
<li><a href="#Manage Ads">Manage Ads</a></li>
<li><a href="#Activity Logs">Activity Logs</a></li>
<li><a href="#Setting">Setting</a></li>
<li><a href="#Log Out">Log Out</a></li>
</ul>
):
(
null
)
}

</div>

);
}
}

export default Dropdown;

style.css
This is a style sheet design for the drop-down menu.
.dropdown {
position: relative;
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
top:45px;
right:0px;
width: 200px;
background-color: white;
font-weight:bold;
position: absolute;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
li a {
color: #000;
text-decoration: none;
}
li {
padding: 8px 16px;
border-bottom: 1px solid #e5e5e5;
}
li:last-child {
border-bottom: none;
}
li:hover {
background-color: #e5e5e5;
color: white;
}
.button{
width:178px;
height:18px;
background-color:#ff3232 ;
padding:12px;
border-radius:5px;
font-weight:bold;
color:white;
}
.button:before{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: white transparent transparent transparent;
right:6px;
top:18px;
}


index.js
This is a main component which helps to display the dropdown menu. Here we are appending the dropdowm menu list in div tag whose ID value is "root"
Example :
ReactDOM.render(displayDropdown, document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Dropdown from './dropdownmenu/Dropdown';


var displayDropdown = (
<div style={{display: 'flex', justifyContent: 'center'}} >
<Dropdown />
</div>
);

ReactDOM.render(displayDropdown, document.getElementById('root'));

registerServiceWorker();

Hope you like this simple example for dropdown menu design.




Download Link :
https://github.com/skptricks/react/tree/master/dropdown%20menu%20design%20in%20reactjs