是否可以让侧边导航菜单从左侧过渡,同时推送其他内容以及不透明的颜色叠加层?
我尝试在桌面浏览器中完美运行的版本,但当我切换到移动设备时,边栏会扩展页面的高度并且页面失去流动性。
示例:已更新 https://www.codeply.com/p/RRVDkqEyj4 - 当我在移动设备上通过 Codeply 查看页面时,它运行良好。然而,this是左侧菜单在上传到我的网站时仅在移动设备上的显示方式。另外,如果我使左侧菜单从右侧过渡,那也可以完美地工作,并且菜单不会缩放得更大……这只是与它从左侧过渡有关。
编辑:Codeply 链接已更新代码。
最佳答案
问题是您正在对 #mainWrapper
(translateX(80%)
) 应用转换,这会影响 position:fixed
元素也在其中。
您可以重新设置整个页面的样式以确保 #mainWrapper
元素一直到达页面底部,或者您可以将叠加层移动到 # mainWrapper
.
只需将两个叠加层移到站点外
改变
<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">
<div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
<div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>
到
<div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
<div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>
<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">
和
.service-menu-overlay.overlay-show{z-index: 5000 !important;}
到
.service-menu-overlay.overlay-show{z-index: 1 !important;}
应该可以解决大部分问题。
关于javascript - 关闭推送内容的 Canvas 边栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58959058/