10

React Hamburger menu Using Pure CSS

 3 years ago
source link: https://www.js-tutorials.com/react-js/react-hamburger-menu-using-pure-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React Hamburger menu Using Pure CSSSkip to main content

This react tutorial help to create react hamburger menu using pure css. It also called slide out menu using css. You have seen many places a hamburger icon, that slide into view when you click or tap on hamburger icon. You can use any icon to view/appear slide out menu items.

The sample UI:

slideout-navigation-reactjs

By default, menu will hide and only navigation icon will display, If you click on a hamburger icon. The menu will slide out and the content behind it will appear. Let’s look at how to create all of this using 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 button or icons. Create pure css styles based hide and show menu.

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

Conclusion

This is simple example to slide out menu into react app. The end user will click hamburger icon and display menu. You can modify slide out event as per your need. You can create display menu on hover of hamburger menu icon.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK