CODEWITHSUNDEEP
reactjswebmenu
MΛRTIN N
MΛRTIN N

Reputation: 123

React web navigation switch to Burger Menu

Im building my first React Website and want to implement mobile support. So the first thing i want to do is, the Navigation should change to Burger menu wenn the window is pulling smaller. Like this site does.

Anybody an idea how to do this? thanks.

Upvotes: 1

Views: 2181

Answers (2)

MΛRTIN N
MΛRTIN N

Reputation: 123

i share my solution here:

first install:

npm install react-burger-menu --save

my buergermenu.js looks like:

import { slide as Menu } from 'react-burger-menu'
import React from "react";
import './burgermenu.css';

class burger extends React.Component {
    showSettings (event) {
        event.preventDefault();

      }

  render () {
    // NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling
    return (

      <Menu right width={ '100%' } disableAutoFocus >
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contribute" className="menu-item" href="/contribute">Contribute</a>
        <a id="download" className="menu-item" href="/download">Download</a>
      </Menu>
    );
  }
}
export default burger

buergermenu.css:

/* Position and sizing of burger button */
.bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    right: 36px;
    top: 36px;
  }
  
  /* Color/shape of burger icon bars */
  .bm-burger-bars {
    background: white;
  }
  
  /* Color/shape of burger icon bars on hover*/
  .bm-burger-bars-hover {
    background: #a94400;
  }
  
  /* Position and sizing of clickable cross button */
  .bm-cross-button {
    width: 36px;
    height: 36px;
    right: 36px;
    top: 36px;
  }
  
  /* Color/shape of close button cross */
  .bm-cross {
    background: white;
  
    
  }
  
  /*
  Sidebar wrapper styles
  Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
  */
  .bm-menu-wrap {
    position: fixed;
    height: 100%;
  }
  
  /* General sidebar styles */
  .bm-menu {
    background: rgba(255,127,36, 0.7);
    padding: 2.4em 2.5em 0;
    font-size: 1.8em;
  }
  
  /* Morph shape necessary with bubble or elastic */
  .bm-morph-shape {
    fill: #373a47;
  }
  
  /* Wrapper for item list */
  .bm-item-list {
    color: #b8b7ad;
    
  }
  
  /* Individual item */
  .bm-item {
    display: inline-block;
  }
  
  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  .menu-item {
    text-decoration: none;
    color: white;
    font-weight: bold;
    line-height: 2;
  }

@media (min-width: 1000px) {
    .bm-burger-bars {
    display: none !important;
    }
  }

App.js:

import Burger from './burgermenu'

<header>
          
         <Burger />
</header>

Maybe its useful for something else.

Upvotes: 2

Stockster
Stockster

Reputation: 109

You can build one from scratch. Depends on what you're trying to accomplish. I'd probably follow a tutorial of sorts if you're new to react. UDemy has tons of courses, if you use your browser in the private mode you should get the $10 courses with over 30 hours of content. Lynda/Linkedin Learning as well.

This person has an interactive library you can install into your project. npm install react-burger-menu... https://negomi.github.io/react-burger-menu/

I like to use MaterialUI for creating easy and useful components that are nicely styled out of the box. They don't appear to have a burger option, but they do have several others you might find interesting. That'd be an npm install @material-ui/core... https://react.semantic-ui.com/collections/menu/#types-basic

Another one I've used in the past is Semantic UI. They have a lot of options as well. Similarly to MaterialUI they don't have a burger option to my knowledge but, they do have several others. npm install semantic-ui-react... https://react.semantic-ui.com/collections/menu/#types-basic

All options above have an interactive website that helps you with the components. It is kind of cheating but, huge time savers when you're working on robust web applications. You can also google examples of burger menus using bootstrap or just vanilla css.

Upvotes: 1

Related Questions