Skip to main content
slideout-navigation-reactjs

React Hamburger menu Using Pure CSS

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:

slideout-navigation-reactjs

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *