javascript - 将汉堡菜单移动到右侧 react-burger-menu
问题描述
我有一个使用 react-burger-menu 组件的汉堡菜单组件,它工作正常,但我希望它移动到页面的右侧并从右侧打开它。我在 CSS 中尝试了 right:0 和 float:right 并尝试更改位置系统,但它要么不动,要么样式被破坏。如何将完全相同的菜单向右移动?
export default props => {
return (
// Pass on our props
<Menu {...props}>
<a className='menu-item' href='/'>
Home
</a>
<a className='menu-item' href='/burgers'>
Burgers
</a>
<a className='menu-item' href='/pizzas'>
Pizzas
</a>
<a className='menu-item' href='/desserts'>
Desserts
</a>
</Menu>
)
}
html,
body {
margin: 0;
}
#App {
font-family: sans-serif;
height: 100vh;
}
#page-wrap {
text-align: center;
overflow: auto;
}
.bm-item {
display: inline-block;
text-decoration: none;
margin-bottom: 10px;
color: #d1d1d1;
transition: color 0.2s;
}
.bm-item:hover {
color: white;
}
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
left: 36px;
top: 36px;
/* right: 0; */
/* float: right; */
}
.bm-burger-bars {
background: #373a47;
}
.bm-cross-button {
height: 24px;
width: 24px;
}
.bm-cross {
background: #bdc3c7;
}
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
}
.bm-morph-shape {
fill: #373a47;
}
.bm-item-list {
color: #b8b7ad;
}
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
and:
class HRPanel extends Component {
render () {
return (
<div id='App'>
<SideBar pageWrapId='page-wrap' outerContainerId='App' />
<div id='page-wrap'>
</div>
</div>
)
}
}
export default HRPanel
关于如何解决这个问题的任何想法?
解决方案
固定风格,如:
.bm-burger-button {
position: relative;
width: 36px;
height: 30px;
right: 36px;
top: 36px;
/* right: 0; */
float: right;
}
推荐阅读
- html - 修改 Bootstrap 工具提示的布局
- python - 如何使用 Django 比较 3 个日期?
- python - 在 Django 中搜索多个数据模型
- java - 无法使用 Servlet 和 JSP 更新 mySQL
- java - api 22 中 LocationListener 的问题
- kustomize - kustomize:使用 Argo Rollout CRD 进行战略合并
- objective-c - Restricting code to Objective-C or Swift callers
- javascript - Electron.JS + devtoolsinstaller:'BrowserWindow.addDevToolsExtension' 已弃用并将被删除。请改用“session.loadExtension”
- python - 有没有办法找到/检测两个像素的中间,或者由opencv创建的两条线?
- python - 字典按字母倒序排序并打印最高分数