滑动菜单栏（ JavaScript 和 React 实现）

2022-11-06 17:27:56

动态滑动的导航栏

效果图展示
- 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>

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);
}

其中重点的是 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)'
    }

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

React 实现

后续补充。

总结

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

码农公寓

动态滑动的导航栏

代码实现

总结

相关文章