html页面添加左侧滑动菜单与内容部分的滚动条

清疚 2023-06-04 13:00 125阅读 0赞

html + css + jquery

展示地址：[https://migloo.gitee.io/fron][https_migloo.gitee.io_fron]t 或 [https://www.igloo.xin/front][https_www.igloo.xin_front]

思路：

1、通过jquery的animate方法，实现menu菜单的滑出滑入

2、menu菜单通过relative的设置，将其默认设置到页面左侧不可视区

3、通过点击事件，调用animate，将menu滑出滑入

样式如下：

指定一个固定大小的区域显示的样式如下：

![379702-20190904150201529-1267601008.png][] ![379702-20190904150205053-1666270250.png][]

代码如下：

![379702-20190904150605056-38365111.png][]

body {
        width: 100vw;
        height: 100vh;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: #FFEBCD;
    }
    
    body>div {
        width: 360px;
        height: 640px;
        border: 3px groove blanchedalmond;
        border-radius: 8px;
        background: #f1f1f1;
        padding: 5px;
        overflow: hidden;
    }
    
    .page {
        width: 500px;
        height: 100%;
        display: flex;
        flex-direction: row;
        position: relative;
        left: -140px;
    }
    
    .content {
        height: 100%;
        width: 360px;
        display: flex;
        flex-direction: column;
    }
    
    .content>img {
        margin-top: 15px;
        margin-left: 10px;
        cursor: pointer;
        height: 26px;
        width: 32px;
    }
    
    .content>div {
        flex-grow: 1;
        overflow: auto;
        padding: 5px;
        font-size: 2em;
        -webkit-overflow-scrolling: touch;    
    }
    
    .menu {
        height: 100%;
        width: 120px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
    }
    
    .menu>div {
        margin: 5px 0 10px 5px;
    ｝

![379702-20190904150903324-1404588859.png][]

设置自动适应全部网页空间的样子如下：

![379702-20190904150343699-859736149.png][] ![379702-20190904150416239-73410013.png][]

![379702-20190904150930327-1843447803.png][]

转载于:https://www.cnblogs.com/janken/p/11459293.html

[https_migloo.gitee.io_fron]: https://migloo.gitee.io/front
[https_www.igloo.xin_front]: https://www.igloo.xin/front/
[379702-20190904150201529-1267601008.png]: https://img2018.cnblogs.com/blog/379702/201909/379702-20190904150201529-1267601008.png
[379702-20190904150205053-1666270250.png]: /images/20230601/9c4abd15e4a5454fa15fc8848fc1c3f9.png
[379702-20190904150605056-38365111.png]: /images/20230601/62e8b280e74b4def94a736d0710c6fa3.png
[379702-20190904150903324-1404588859.png]: /images/20230601/c6c99ffec7914e1b85d4300e04866e66.png
[379702-20190904150343699-859736149.png]: https://img2018.cnblogs.com/blog/379702/201909/379702-20190904150343699-859736149.png
[379702-20190904150416239-73410013.png]: /images/20230601/e17e714ff55a4545b02b3fe3366edb12.png
[379702-20190904150930327-1843447803.png]: /images/20230601/a8bd56008564496ebee986637f13b134.png