使用react-burger-menu與反應路由器

我試圖按照本指南（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。我遇到的問題是菜單按鈕似乎被放置在菜單的左側，菜單似乎沒有隱藏。看起來像附加的屏幕截圖。使用react-burger-menu與反應路由器

我的代碼看起來是這樣的：

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

爲什麼是撥動出現在它們的實際菜單的左邊，爲什麼不實際的菜單隱藏的按鈕？如果我點擊切換按鈕，菜單只是轉移權甚至更多...

來源

2017-03-14 user2061886

添加到您的CSS：

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

此菜單將放置在屏幕的左側。

出現在屏幕左側的按鈕是故意的，如果你想堅持的頁面，而不是跟着你，當你滾動，改變

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

到

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

來源

2017-03-29 20:49:49 Lilmortal

使用react-burger-menu與反應路由器

回答

相關問題