This react tutorial help to create react hamburger menu using pure css. It is also called the slide-out menu using CSS. You have seen many places a hamburger icon, that slides into view when you click or tap on the hamburger icon. You can use any icon to view/appear slide-out menu items.
The sample UI:
The menu will be hidden by default, and only the navigation icon will be visible. If you select a hamburger icon. The menu will slide out, revealing the content behind it. Let’s take a look at how to do all of this in React.
React Slide Out Navigation
Let’s create react app and add menu navigation into our react app. I am not using any libs or external CSS to display buttons or icons. Create a hide and show menu that is entirely based on CSS styles.
Create simple react app using npx
command-
npx create-react-app slideoutmenu-poc
Now, go inside the project folder.
cd slideoutmenu-poc
The file will be change
There are following files will be create or change:
-
index.js
: This is main file and contains all components. -
src/app.css
: This file will have all css classes for menu. -
src/SlideOutMenuContainer.js
: This file contains all jsx and js slide out menu logic.
Menu Container
Let’s create our SlideOutMenuContainer component into src/folder
.This component is responsible for like managing state, defining function, handler and displaying initial view. Added the following JS and JSX into it:
We ill add below code into this file:
//SlideOutMenuContainer.js import React, {Component} from 'react'; import './App.css'; class SlideOutMenuContainer extends Component { constructor(props, context) { super(props, context); this.state = { visible: false }; } render() { const { visible } = this.state; return ( <div> <div id='slide_nav'> <p id="slide_nav_button" onClick={() => this.setState({visible: !visible })}>☰</p> </div> <div> <ul id='slide_menu' style={{ display: (visible ? 'block' : 'none') }}> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Advertise</a></li> </ul> </div> </div> ); } } export default SlideOutMenuContainer;
Pulling SlideOutMenuContainer into index.js File
We will change index.js
file and included SlideOutMenuContainer
file at the top of the file.
import React from 'react'; import ReactDOM from 'react-dom'; import SlideOutMenuContainer from './SlideOutMenuContainer'; ReactDOM.render(<SlideOutMenuContainer />, document.getElementById('root'));
pulling the react and react-dom libraries, Also referencing imported SlideOutMenuContainer
and passed into the render()
method. The 'root'
is the id of container which will exist into the public/index.html file.
We are going to open app.css
file in our /src
folder and defined the all menu styling. In this file, add the following style rules:
body { margin:0px auto; padding:0px; } #slide_nav { background-color:black; width:100%; height:60px; line-height:60px; color:white; font-family:helvetica; font-size:25px; padding-left:10px; box-sizing:border-box; } #slide_nav_button { width:90px; cursor:pointer; } ul { display:none; padding:0px; margin:0px; width:200px; height:90%; background-color:#2E2E2E; position:absolute; box-shadow:inset 0px 0px 50px 0px #6E6E6E; } #slide_menu li { border-bottom:1px solid #424242; } #slide_menu li:hover { width:201px; background-color:#2E2E2E; box-shadow:inset 0px 0px 50px 0px #848484; -webkit-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #slide_menu li a { height:50px; line-height:50px; display:block; color:silver; text-decoration:none; font-size:18px; font-family: helvetica; padding-left:10px; } #slide_menu li:hover a { padding-left:25px; color:white; -webkit-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } #page_content { margin-top:40px; text-align:center; font-family: helvetica; }
Checkout Other React tutorials:
- How To Handle Routing In React Using BrowserRouter
- React Layout Using Material Design
- React File Upload In 5 Minute
- Autocomplete Example Using React
- React’s New Context API With Example
- React Helmet with ReactJs
Conclusion
This is a simple example of a slide-out menu into react app. The end-user will click the hamburger icon and display the menu. You can modify the slide-out event as per your need. You can create a display menu on the hover of the hamburger menu icon.