reactjs - 移动菜单效果扩展到桌面视图
问题描述
问题:
如何让移动菜单的导航不影响桌面?当我单击汉堡包按钮隐藏菜单并将浏览器大小调整为桌面时,导航消失了。我想知道我做错了什么,以便更好地理解我的错误。
完整代码如下:
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
}
this.toggleShow = this.toggleShow.bind(this)
this.hide = this.hide.bind(this)
}
toggleShow() {
this.setState({
show: !this.state.show
});
}
hide(e) {
if (e && e.relatedTarget) {
e.relatedTarget.click();
}
}
render() {
return (
<Router>
<div className="FlexContainer NavbarContainer">
<div className="mobilecontainer LeftNav">
<h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
<div
className="hamburger inlinev"
onClick={this.toggleShow}
onBlur={this.hide}>
<img alt="menubtn" src={hamburger}></img>
</div>
</div>
{
this.state.show &&
(
<ul className="NavBar">
<Dropdown/>
<li className="RightNav"><Link to="/">Host Your Space</Link></li>
<li className="RightNav"><Link to="/">About Us</Link></li>
<li className="RightNav"><Link to="/">Contact Us</Link></li>
<li className="RightNav"><Link to="/">Sign Up</Link></li>
<li className="RightNav"><Link to="/">Login</Link></li>
</ul>
)
}
</div>
</Router>
);
}
}
export default Navigation;
SCSS代码:
.NavbarContainer {
border-bottom: 1px #E7E7E7 solid;
.mobilecontainer {
margin: 2.1em;
.hamburger {
display: inline;
img {
width: 35px;
cursor: pointer;
float: right;
}
}
}
.NavBar {
// display: none;
.RightNav {
text-align: center;
padding: 27px 0;
border-right: none;
border-left: none;
border-bottom: 1px #E7E7E7 solid;
font-size: large;
a {
color: #0E0E0E;
}
}
}
.Dropdown {
float: none;
overflow: hidden;
.Dropdown-Content {
position: relative;
background-color: white;
z-index: 2;
min-width: 217px;
a {
float: none;
display: block;
text-align: center;
border: 1px #E7E7E7 solid;
padding: 15px 22px;
}
}
}
.dropdown-content {
a {
&:hover {
background-color: #ddd
}
}
}
.dropdown {
&:hover {
.dropdown-content {
display: block;
}
}
}
.LeftNav {
flex-grow: 8.2;
font-weight: bold;
font-size: large;
display: flex;
align-items: center;
}
@media (min-width: 55em) {
display: flex;
flex-direction: row;
align-items: center;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 60px;
background-color: #ffffff;
padding: 3em;
.LeftNav {
flex-grow: 0.2;
font-weight: bold;
font-size: large;
}
.mobilecontainer {
margin: 0;
.hamburger {
img {
display: none
}
}
}
.NavBar {
display: flex;
.RightNav {
padding-left: 15px;
padding-right: 15px;
text-align: initial;
border-bottom: none;
font-size: large;
}
.FarRight {
flex-grow: 1;
}
}
.Dropdown {
float: left;
overflow: hidden;
.Dropdown-Content {
position: absolute;
top: 96px;
background-color: white;
z-index: 2;
min-width: 217px;
a {
text-align: left;
padding: 15px 22px;
}
}
}
}
}
这是我用于此项目的 SCSS 代码。
解决方案
this.state.show
只负责切换移动菜单。当show ===false
反应忽略在移动或桌面上渲染导航栏时。你不能用这种方式来实现你的目标。我的建议是考虑使用react-bootstrap Navbar或reactstrap Navbar
我希望这会对你有所帮助。
推荐阅读
- tensorflow - 如何从预训练的 TensorFlow 模型中删除层?
- javascript - 将丰富的消息集成到 Dialogflow fullfilment
- php - 更改 php DOMElement 的 outerHTML?
- eclipse - Qemu 如何定位其图像文件或 Eclipse 如何与 Qemu 交互?
- python - 从 Python 的 Azure 函数获取应用程序设置值(环境)
- django - IP 错误:Django 应用程序未使用 docker 部署
- python - 如何在 Python 中找到精确的字符串匹配?
- r - text2vec 文档相似度代码返回两个值
- python - 在 UPDATE sql 命令中使用变量值 - SQLite (Python)
- php - 如何 PHP appendChild 在 ID 中?