侧滑菜单栏和底部抽屉菜单栏（ JavaScript 和 React 实现）_js 实现从底抽屉

作者：Cpp五条 | 2024-02-11 20:49:16

踩

js 实现从底抽屉

动态滑动的导航栏

效果图展示
- web端
- 移动端
- 底部抽屉菜单
工作原理
页面初始状态

这里浏览器显示html元素的问题，用户看到的页面是是左边的可视区域，并看不到右边的菜单部分。
- 菜单激活状态
  
  当菜单被激活显示的，其实就是整个页面内容整体向左边移动了菜单的宽度。这时候用户看到的就是菜单出现，主页被挤到左侧。

代码实现

html

<body>
    <aside id="aside" class="aside-container">
        <div class="aside-header">
            <div class="aside-avatar"></div>
        </div>
        <ul class="aside-navigation">
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
        </ul>
    </aside>
    <main id="main-container" class="main-container">
        <button id="mainMenu">菜单</button>
    </main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

html代码也就是两部分，一个是main部分（上图中的主页），一个就是aside部分（上图中的菜单）

css

body {
    padding   : 0;
    margin    : 0;
    height    : 100vh;
    overflow-x: hidden;
}

.main-container {
    position           : relative;
    height             : 100%;
    height             : 100%;
    transition-duration: 0.6s;
    display            : flex;
}

.main-container button {
    margin    : auto;
    width     : 100px;
    height    : 50px;
    font-size : 30px;
    border    : none;
    background: linear-gradient(to bottom right, #af79ea 0%, #ffffff 100%);
}

.main-overlay {
    position  : absolute;
    right     : 0;
    left      : 0;
    top       : 0;
    bottom    : 0;
    background: rgba(0, 0, 0, .4);
    z-index   : 1031;
    display   : block;
}


.aside-container {
    background : #fff;
    width      : 300px;
    height     : 100%;
    position   : fixed;
    top        : 0;
    bottom     : 0;
    right      : -300px;
    transition-duration: 0.3s;
}


.aside-show {
    transform: translateX(-300px);
    z-index  : 10000;

}


.aside-header {
    background     : #1ce678;
    display        : flex;
    align-items    : center;
    justify-content: center;
    height         : 200px;
}

.aside-avatar {
    background   : #ffffff;
    height       : 150px;
    width        : 150px;
    border-radius: 150px;
}

.aside-navigation {
    margin : 0;
    padding: 0;
}

.aside-navigation li {
    list-style: none;
    padding   : 10px 30px;
}

.aside-navigation li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .03);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

其中重点的是 transform: translateX(-300px); transition-duration: 0.3s;控制左移的距离和时间，从而出现滑动动效

原生 JavaScript 实现

 window.onload = function () {
        let mainMenu = document.getElementById('mainMenu');

        mainMenu.onclick = function (e) {
            let asideDom = document.getElementById('aside');
            asideDom.classList.add('aside-show');

            let overlayDom = document.createElement('div');
            overlayDom.setAttribute('class', 'main-overlay');
            overlayDom.setAttribute('onclick', 'menusHide(this)');
            let mainDom = document.getElementById('main-container');
            mainDom.appendChild(overlayDom);

            mainDom.style.transform = 'translateX(-300px)'
        }
    }

    function menusHide(event) {
        let asideDom = document.getElementById('aside');
        asideDom.classList.remove('aside-show');
        let mainDom = document.getElementById('main-container');
        mainDom.removeChild(event);
        mainDom.style.transform = 'translateX(0px)'
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

js控制给aside增加和删除移动的class，以及新增和删除激活时的遮罩层overlay

React 实现

后续补充。

底部抽屉菜单实现

在移动端应用中，滑动抽屉菜单功能是非常常见的。实现的原理跟上面的侧向滑动菜单的原理相同。利用 css 的translate属性实现组件上下左右滑动。

html

<main id="main-container" class="main-container">
        <button id="mainMenu">菜单</button>
        <button onclick="drawerShow()">抽屉</button>
    </main>

    <div id="drawer" class="drawer-container">
        <div class="drawer-header">
            <div class="drawer-header-left">取消</div>
            <div class="drawer-header-right">确认</div>
        </div>
        <ul>
            <li>菜单</li>
            <li>菜单</li>
            <li>菜单</li>
        </ul>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.drawer-container {
    background         : #ffffff;
    width              : 100%;
    position           : fixed;
    bottom             : 0;
    transform          : translateY(100%);
    transition-duration: 0.3s;
}

.drawer-header {
    height: 60px;
    border-bottom: 1px dashed gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 20px;
}

.drawer-container ul {
    padding: 0;
}

.drawer-container ul li {
    list-style: none;
    padding   : 10px 20px;
}

.drawer-container li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .03);
}

.drawer-container-active {
    transform: translateY(0%);
    z-index  : 10000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function menusHide(event) {
        let asideDom = document.getElementById('aside');
        asideDom.classList.remove('aside-show');
        let mainDom = document.getElementById('main-container');
        mainDom.removeChild(event);
        mainDom.style.transform = 'translateX(0px)'

        let drawer = document.getElementById('drawer');
        drawer.classList.remove('drawer-container-active')
    }

    function drawerShow(event) {
        let drawer = document.getElementById('drawer');
        drawer.classList.add('drawer-container-active')

        let overlayDom = document.createElement('div');
            overlayDom.setAttribute('class', 'main-overlay');
            overlayDom.setAttribute('onclick', 'menusHide(this)');
            let mainDom = document.getElementById('main-container');
            mainDom.appendChild(overlayDom);

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注：抽屉菜单代码是在上面侧滑菜单的基础上的。

总结

市面上有很多现成的UI组件库，很多朋友喜欢直接开箱即用，这也没什么不好。但是底层的实现原理，对性能调优或者面试都是有好处的。我上面列举出来只是滑动菜单的一种实现方式，有机会的话我会继续补充和分享。如果有不正确的地方希望可以指出，我会及时修改 ^ _ ^。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/76896

侧滑菜单栏 和 底部抽屉菜单栏（ JavaScript 和 React 实现 ）_js 实现从底抽屉

动态滑动的导航栏

代码实现

底部抽屉菜单实现

总结

侧滑菜单栏和底部抽屉菜单栏（ JavaScript 和 React 实现）_js 实现从底抽屉