Javascript 滑动菜单在关闭时堆叠文本_Javascript_Html_Css_Menu_Slide

Javascript 滑动菜单在关闭时堆叠文本

javascript html css menu

Javascript 滑动菜单在关闭时堆叠文本,javascript,html,css,menu,slide,Javascript,Html,Css,Menu,Slide,我有一个滑动菜单： @font-face{ 字体系列：黑体字； src:url（'font/erasbd.TTF'）；/*Chrome、Opera、Firefox*/ } @字体{ 字体系列：ErasDemi； src:url（'font/erasdemi.TTF'）； } @字体{ 字体系列：ErasLight； src:url（'font/eraslight.TTF'）； } 身体{ 背景色：#EDEDED；宽度：90%；最小高度：100%； /*边框颜色：#000000；！以防您希望

我有一个滑动菜单：

@font-face{
字体系列：黑体字；
src:url（'font/erasbd.TTF'）；/*Chrome、Opera、Firefox*/
}
@字体{
字体系列：ErasDemi；
src:url（'font/erasdemi.TTF'）；
}
@字体{
字体系列：ErasLight；
src:url（'font/eraslight.TTF'）；
}
身体{
背景色：#EDEDED；
宽度：90%；
最小高度：100%；
/*边框颜色：#000000；！以防您希望看到主体在屏幕上的位置。用于调试各种设备！
边界样式：开始*/
保证金：0自动；
过渡：1s；
}
#标题{
背景色：#000000；
位置：固定；
高度：95px；
宽度：100%；
排名：0
左：0；
右：0；
}
#主页{
背景色：#EDEDED；
身高：82%；
宽度：100%；
保证金：0自动-4em；
位置：相对位置；
填充：无；
溢出：自动；
}
#页脚{
高度：80px；
宽度：100%；
背景色：#000000；
位置：固定；
底部：0；
左：0；
右：0；
}
#标志{
身高：100%；
宽度：自动；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
填充顶部：60px；
过渡：0.5s；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：27px；
颜色：#818181；
显示：块；
过渡：0.3s；
字体系列：ErasLight；
}
.sideNav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}	
.sideNav.close按钮{
位置：绝对位置；
排名：0；
右：25px；
字体大小：40px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sideNav{填充顶部：15px；}
.sideNav a{字体大小：18px；}
}
#梅努斯图夫{
颜色：白色；
浮动：对；
字体大小：30px；
字体系列：ErasLight；
文字装饰：无；
边缘顶部：20px；
右边距：20px；
}
#menuStuff。悬停{
颜色：#FFFFFF；
文字装饰：无；
}


函数openNav（）{
document.getElementById（“mySideNav”）.style.width=“250px”；
document.body.style.backgroundColor=“rgba（0,0,0,0.4）”；
}
函数closeNav（）{
document.getElementById（“mySideNav”）.style.width=“0px”；
document.body.style.backgroundColor=“白色”；
}

这是因为您更改了宽度。即使

.sideNav

具有

宽度：1px

（在动画开始时），

仍然存在

您可以改为设置位置的动画：

注意：请注意，我只是切换

open

类，并控制css中的样式，而不是更改脚本中的样式。我认为这是一个更好的方法

函数openNav（）{ document.getElementById（“mySideNav”）.classList.add（'open'）； document.body.style.backgroundColor=“rgba（0,0,0,0.4）”； } 函数closeNav（）{ document.getElementById（“mySideNav”）.classList.remove（'open'）； document.body.style.backgroundColor=“白色”； }

@font-face{
字体系列：黑体字；
src:url（'font/erasbd.TTF'）；/*Chrome、Opera、Firefox*/
}
@字体{
字体系列：ErasDemi；
src:url（'font/erasdemi.TTF'）；
}
@字体{
字体系列：ErasLight；
src:url（'font/eraslight.TTF'）；
}
身体{
背景色：#EDEDED；
宽度：90%；
最小高度：100%；
/*边框颜色：#000000；！以防您希望看到主体在屏幕上的位置。用于调试各种设备！
边界样式：开始*/
保证金：0自动；
过渡：1s；
}
#标题{
背景色：#000000；
位置：固定；
高度：95px；
宽度：100%；
排名：0
左：0；
右：0；
}
#主页{
背景色：#EDEDED；
身高：82%；
宽度：100%；
保证金：0自动-4em；
位置：相对位置；
填充：无；
溢出：自动；
}
#页脚{
高度：80px；
宽度：100%；
背景色：#000000；
位置：固定；
底部：0；
左：0；
右：0；
}
#标志{
身高：100%；
宽度：自动；
}
.侧导航{
身高：100%；
宽度：250px；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：#111；
溢出x：隐藏；
填充顶部：60px；
过渡：0.5s；
转换：translateX（250px）；
}
.sideNav.open{
变换：translateX（0）；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：27px；
颜色：#818181；
显示：块；
过渡：0.3s；
字体系列：ErasLight；
}
.sideNav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}	
.sideNav.close按钮{
位置：绝对位置；
排名：0；
右：25px；
字体大小：40px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sideNav{填充顶部：15px；}
.sideNav a{字体大小：18px；}
}
#梅努斯图夫{
颜色：白色；
浮动：对；
字体大小：30px；
字体系列：ErasLight；
文字装饰：无；
边缘顶部：20px；
右边距：20px；
}
#menuStuff。悬停{
颜色：#FFFFFF；
文字装饰：无；
}