html5点击文字从右侧滑出层的代码

Posted 2023-03-14

手机移动端使用，能随手机屏幕宽度放大或缩小，代码尽量简单，能兼容较常用的浏览器，例如微信浏览器，Safari，淘宝浏览器等；
我是做网页，想实现点击右上角的“菜单”字或图标，然后从右侧能滑出一个层，这个层我需要用来放菜单，层占满屏幕右侧，左侧没有占据的就是半透明的黑色，点击关闭，层就退回来，想有一个简单的动画，也就是从右边滑出，然后有滑进去，网上找的要嘛就是不动的，要嘛就是代码很复杂，调用这调用那的，有没有比较简单的代码，请大家帮帮忙，谢谢！

参考技术A

单用css应该不太容易，用js吧

<script>
    window.onload = function () //因为是放在最前面，元素没有加载完成所以要加上window.onload表示加载完成
        window.btn = document.getElementById('menubtn');//通过ID来获取菜单打开按钮（文字图片均可实现）
        window.menu = document.getElementById('menu');//通过ID来获取菜单主体
        btn.addEventListener("click", menuClick);//绑定事件：点击的时候触发函数
    ;
    function menuClick() 
//思路：当现在菜单是关闭的时候点击按钮菜单CSS动画显示，然后添加class “open”，删除class “close”
//     当现在菜单是打开的时候点击按钮菜单CSS动画消失，然后添加class “close”，删除class “open”
        if (btn.class === "open") 
            menu.classList.add('slide-to-right-and-hide');
            menu.classList.remove("open");
            menu.classList.add("close");
        
        else 
            menu.classList.add('slide-to-left-and-show');
            menu.classList.remove("close");
            menu.classList.add("open");
        
    
</script>
<style>
    #menu 
        position: fixed; /* 永远悬浮在一个地方 */
        top: 0;
        opacity: 0;
        right: -500px; /* 保证全部都被遮盖 */
        width: 500px;
        height: 100vh; /* 高度为整个页面高度 */
        background: black; /* 方便观察 */
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    

    #menubtn 
        position: fixed;
        top: 0;
        right: 0;
        height: 10px;
        width: 10px;
        background: black;
    

    @keyframes slide-to-left-and-show 
    from 
        opacity: 0 !important;
        right: -500px !important;
    
    to 
        opacity: 1 !important;
        right: 0px !important;
    
     /* 打开动画 */
    .slide-to-left-and-show 
        animation-name: slide-to-left-and-show; /* 使用动画 */
        opacity: 1 !important;
        right: 0px !important;
    

    @keyframes slide-to-right-and-hide 
    from 
        opacity: 1 !important;
        right: 0px !important;
    
    to 
        opacity: 0 !important;
        right: -500px !important;
    
     /* 关闭动画 */
    .slide-to-right-and-hide 
        animation-name: slide-to-right-and-hide; /* 使用动画 */
        opacity: 0 !important;
        right: -500px !important;
    

</style>
<div id="menubtn"></div>
<div id="menu"></div>

如果有不懂的可以继续追问哦，纯手打，累死人了代码编辑，求采纳QAQ

参考技术B 百度移动端自适应