手机端 导航设计 JS +CSS
识别屏幕大小 显示手机导航折叠按钮
nav-show-btn
<span class="nav-show-btn"><i class="iconfont"> </i></span>
@media screen and (max-width: 1024px)
.nav-show-btn {
display: block;
}
.nav-show-btn {
width: 35px;
height: 30px;
line-height: 30px;
border-radius: 2px;
border: #ddd solid 1px;
}
}
JS 点击 导航折叠按钮 增加类名 show-m-menu
document.getElementByclassName("menu-main-container").classList.add("show-m-menu"); //增加样式类名
@media screen and (max-width: 1024px)
.menu-main-container {
position: fixed;
width: 60%;
height: 100%;
padding-top: 15%;
top: 0;
right: -60%;
overflow-y: scroll;
overflow-x: hidden;
background-color: #f8f8f8;
z-index: 9999;
transition: right 0.3s;
}