我在使用自适应网页设计时遇到了一个小问题,发生的事情是我将左菜单设置为固定位置,当我调整浏览器大小时,左菜单仍然固定,但是在切换设备工具栏,我将提供图片来解释我的情况。
当我单击切换设备工具栏并选择iPhone时,会得到以下内容
但是当我调整浏览器大小时,我得到的是:
第二个结果就是我想要的,因为我的菜单中有一个滚动条,所以当我调整浏览器的大小时,一切都很好。这是实现此操作的代码。
我的React组件:
class MenuLeft extends Component {
// a code here ( my state and constructor and methods )
render() {
return (
<div>
{this.state.isDisplayed && (
<nav
className={
this.state.isPropositionsClicked
? "co-menu-left co-menu-left--big"
: "co-menu-left co-menu-left--small"
}
>
{!this.state.isPropositionsClicked && (
<div
className={
this.state.isPropositionsClicked
? "co-contrat-propositions"
: "co-contrat-propositions"
}
>
<div className="co-contrat-propositions__list">
{this.renderContrats(this.state.contratItems)}
</div>
</div>
)}
{this.state.isPropositionsClicked && (
<div className="co-contrat-propositions__list">
<ContratProposition
id={this.state.activeContrat.id}
isSelected
allContratDeselected={() => this.handle}
/>
</div>
)}
<div
role="button"
tabIndex={0}
className="co-menu-left__toggle"
onClick={() => this.handleContratsView()}
onKeyDown={() => this.handleContratsView()}
>
<FontAwesomeIcon
role="presentation"
icon={!this.state.isPropositionsClicked ? faAngleUp : faAngleDown}
size="2x"
/>
</div>
<PerfectScrollbar>
{this.renderItems(this.state.menuItems)}
</PerfectScrollbar>
</nav>
)}
{!this.state.isDisplayed && (
<div className="co-menu-left__show">
<div
onKeyDown={this.displayMenuLeft}
className="co-menu-left__show--center"
onClick={this.displayMenuLeft}
role="button"
tabIndex={0}
>
<FontAwesomeIcon icon={faAngleDoubleUp} size="4x" />
</div>
</div>
//
)}
</div>
);
}
}
}
在此代码中重要的只是我相信的导航,因为内部内容与我的问题无关。
这是我的sass文件:
.co-menu-left {
width:110px;
height: 63%; // 83%
position: fixed;
top: 70px;
left:0px;
transition: 0.4s all ease;
z-index: 5;
@include responsive(desktop){
top:0;
height: 65%;
}
/* ------------------ this is the code needed in my problem -------------- */
@include responsive(phone){
width:100vw;
top:0px;
height: 100%;
z-index:1500000;
}
}
我称之为响应式“方法”是我使用的mixin,电话等于或小于600px。
任何帮助将不胜感激。