javascript - How to use react-burger-menu with react router? - Stack Overflow

admin管理员组

文章数量:1023282

I'm trying to follow this guide () to implement react-burger-menu with react-router

Specifically this part .

The issue I'm having is that the menu button seems to be placed on the left of the menu and the menu does not seem to hide. Here's a screenshot of what that looks like.

My code looks like this:

app.js

// This ponent handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './mon/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

header.js

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import {slide as Menu} from 'react-burger-menu';
import Radium from 'radium';

let RadiumLink = Radium(Link);
let RadiumIndexLink = Radium(IndexLink);

const SideBar = () => {
    return (


    <Menu className="bm-menu">
        <RadiumIndexLink className="bm-item-list" to="/" activeClassName="active">Home</RadiumIndexLink>
        <RadiumLink className="bm-item-list" to="/courses" activeClassName="active">Courses</RadiumLink>
        <RadiumLink className="bm-item-list" to="/about" activeClassName="active">About</RadiumLink>
    </Menu>

    );
};

export default SideBar;

style.css

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

Why is the button for the toggle appearing to the left of the actual menu and why doesn't the actual menu hide? If I click the toggle, the menu just shifts right even more...

I'm trying to follow this guide (https://github./negomi/react-burger-menu) to implement react-burger-menu with react-router

Specifically this part https://github./negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-ponent-from-react-router-work.

The issue I'm having is that the menu button seems to be placed on the left of the menu and the menu does not seem to hide. Here's a screenshot of what that looks like.

My code looks like this:

app.js

// This ponent handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './mon/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

header.js

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import {slide as Menu} from 'react-burger-menu';
import Radium from 'radium';

let RadiumLink = Radium(Link);
let RadiumIndexLink = Radium(IndexLink);

const SideBar = () => {
    return (


    <Menu className="bm-menu">
        <RadiumIndexLink className="bm-item-list" to="/" activeClassName="active">Home</RadiumIndexLink>
        <RadiumLink className="bm-item-list" to="/courses" activeClassName="active">Courses</RadiumLink>
        <RadiumLink className="bm-item-list" to="/about" activeClassName="active">About</RadiumLink>
    </Menu>

    );
};

export default SideBar;

style.css

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

Why is the button for the toggle appearing to the left of the actual menu and why doesn't the actual menu hide? If I click the toggle, the menu just shifts right even more...

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Oct 25, 2018 at 22:45 Roy Scheffers 3,9081111 gold badges3333 silver badges3636 bronze badges asked Mar 14, 2017 at 18:57 lightweightlightweight 3,3271818 gold badges9090 silver badges157157 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Add this to your CSS:

.bm-menu-wrap {
  bottom: 0;
  left: 0;
}

This will position the menu to the left of the screen.

The button appearing on the left side of the screen is intentional, if you want it to stick to the page instead of following you when you scroll, change

.bm-burger-button {
   position:fixed;
} 

to

.bm-burger-button {
   position:absolute;
}

I'm trying to follow this guide () to implement react-burger-menu with react-router

Specifically this part .

The issue I'm having is that the menu button seems to be placed on the left of the menu and the menu does not seem to hide. Here's a screenshot of what that looks like.

My code looks like this:

app.js

// This ponent handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './mon/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

header.js

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import {slide as Menu} from 'react-burger-menu';
import Radium from 'radium';

let RadiumLink = Radium(Link);
let RadiumIndexLink = Radium(IndexLink);

const SideBar = () => {
    return (


    <Menu className="bm-menu">
        <RadiumIndexLink className="bm-item-list" to="/" activeClassName="active">Home</RadiumIndexLink>
        <RadiumLink className="bm-item-list" to="/courses" activeClassName="active">Courses</RadiumLink>
        <RadiumLink className="bm-item-list" to="/about" activeClassName="active">About</RadiumLink>
    </Menu>

    );
};

export default SideBar;

style.css

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

Why is the button for the toggle appearing to the left of the actual menu and why doesn't the actual menu hide? If I click the toggle, the menu just shifts right even more...

I'm trying to follow this guide (https://github./negomi/react-burger-menu) to implement react-burger-menu with react-router

Specifically this part https://github./negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-ponent-from-react-router-work.

The issue I'm having is that the menu button seems to be placed on the left of the menu and the menu does not seem to hide. Here's a screenshot of what that looks like.

My code looks like this:

app.js

// This ponent handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './mon/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

header.js

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import {slide as Menu} from 'react-burger-menu';
import Radium from 'radium';

let RadiumLink = Radium(Link);
let RadiumIndexLink = Radium(IndexLink);

const SideBar = () => {
    return (


    <Menu className="bm-menu">
        <RadiumIndexLink className="bm-item-list" to="/" activeClassName="active">Home</RadiumIndexLink>
        <RadiumLink className="bm-item-list" to="/courses" activeClassName="active">Courses</RadiumLink>
        <RadiumLink className="bm-item-list" to="/about" activeClassName="active">About</RadiumLink>
    </Menu>

    );
};

export default SideBar;

style.css

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

Why is the button for the toggle appearing to the left of the actual menu and why doesn't the actual menu hide? If I click the toggle, the menu just shifts right even more...

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Oct 25, 2018 at 22:45 Roy Scheffers 3,9081111 gold badges3333 silver badges3636 bronze badges asked Mar 14, 2017 at 18:57 lightweightlightweight 3,3271818 gold badges9090 silver badges157157 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Add this to your CSS:

.bm-menu-wrap {
  bottom: 0;
  left: 0;
}

This will position the menu to the left of the screen.

The button appearing on the left side of the screen is intentional, if you want it to stick to the page instead of following you when you scroll, change

.bm-burger-button {
   position:fixed;
} 

to

.bm-burger-button {
   position:absolute;
}

本文标签： javascriptHow to use reactburgermenu with react routerStack Overflow