Question

我正在尝试按照本指南（https://github.com/negomi/react-burger-menu）与react-burger-menu实施react-router

特别是这部分https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work。

我遇到的问题是菜单按钮似乎位于菜单的左侧，菜单似乎没有隐藏。这是一个截图，看起来像。

我的代码如下所示：

app.js

// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './common/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);
}

为什么切换按钮出现在实际菜单的左侧，为什么实际菜单不隐藏？如果我点击切换按钮，菜单就会向右移动......

Answer 1

将此添加到您的CSS：

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

这会将菜单置于屏幕左侧。

屏幕左侧显示的按钮是有意的，如果您希望它粘贴在页面上而不是在滚动时跟随您，请更改

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

到

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

如何在反应路由器上使用react-burger-menu？

1 个答案: