Javascript 非画布菜单html css

我想制作一个像这样的非画布菜单，但我将把文本从屏幕中推出，而不是裁剪。我想添加一个函数，在我点击退出后关闭菜单

我从w3school的非画布菜单中获取了代码

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； document.getElementById（“main”）.style.marginLeft=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； document.getElementById（“main”）.style.marginLeft=“0”； }

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

侧导航推送示例
单击下面的元素打开侧面导航菜单，并将此内容向右推

☰ 打开

不要尝试在单击事件上添加/删除CSS规则-尝试使用添加/删除类的单个函数来实现打开/关闭

我创建了一个开放类，它具有您在js中拥有的样式，然后添加/删除该类以允许sidenav打开/关闭

这不是我建议的方式——但要尽可能使它与您的原始代码保持联系——我将整个东西包装在一个id为wrapper的div中——然后在单击该div（包含侧导航和主面板）时说，如果包装器具有打开的类，则将其删除（关闭侧导航）如果没有，打开它

你需要看看你想触发开启的是什么——我假设你不想点击打开侧中堂的整个痛苦面板——但这应该让你知道如何在侧中堂外部点击来关闭它

函数toggleNav（）{
var wrapper=document.getElementById（“wrapper”）；
if（wrapper.classList.contains（“open”））{
wrapper.classList.remove（“打开”）
}否则{
wrapper.classList.add（“打开”）；
};
}

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.打开#mySidenav{
宽度：250px；
}
.打开#主{
左边距：250像素；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

侧导航推送示例
单击下面的元素打开侧面导航菜单，并将此内容向右推

☰ 打开

我在我的网站上做了这项工作，但是我可以更轻松地从w3school复制代码而不做任何更改。谢谢你