手机端导航设计 JS +CSS

小小优化师 anny

已于 2023-08-14 16:18:07 修改

阅读量130

点赞数

分类专栏： Html css 文章标签：前端 javascript html

于 2023-08-11 17:15:45 首次发布

本文链接：https://blog.csdn.net/q28000/article/details/132236656

版权

Html css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

手机端导航设计 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;
}