当侧边菜单 div 接近 0px 时导航链接不隐藏

Question

我正在尝试创建一个 css 侧边菜单，但是当我关闭菜单，将 div 容器宽度设置为 0 时，链接仍然可见。

这是 jsfiddle - https://jsfiddle.net/atLvp6k7/

有趣的是，当我将菜单设置到屏幕右侧时，我没有遇到同样的问题。我需要为 a 项添加边距属性吗？

<div id="side-menu" class="side-nav">  
   <img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
</div>

var isOpen = false;
document.getElementById('close-side').addEventListener("click", function(){
    if (isOpen) {
        document.getElementById("side-menu").style.width = "0px";
        document.getElementById("close-side").style.marginLeft = "0px";
        isOpen = false;
    } else {
        document.getElementById("side-menu").style.width = "250px";
        document.getElementById("close-side").style.marginLeft = "181px";
        isOpen = true;
    } 
})

.side-nav {
  transition: .5s;
  height: 100%;
  width:0;
  background-color: rgba(120, 120, 120, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1; 
}

#close-side {
  margin-left: 0;
  margin-top: 5px;
  transition: linear .5s;
  position: fixed; 
}

Answer 1

css

.side-hidden a {
   display: none;
}

HTML

<div id="side-menu" class="side-nav side-hidden">

脚本

 var isOpen = false;
 document.getElementById('close-side').addEventListener("click", function(){
 if (isOpen) {
        document.getElementById("side-menu").classList.add('side-hidden');
        document.getElementById("side-menu").style.width = "0px";
        document.getElementById("close-side").style.marginLeft = "0px";
        isOpen = false;
    } else {
        document.getElementById("side-menu").classList.remove('side-hidden');
        document.getElementById("side-menu").style.width = "250px";
        document.getElementById("close-side").style.marginLeft = "181px";
        isOpen = true;
    } 
})

我也更新了你的fiddle https://jsfiddle.net/atLvp6k7/1/

不需要isOpen变量

if(document.getElementById("side-menu").classList.contains('side-hidden')){
  alert('isClosed');
}else{
   alert('isOpen');
}

Answer 2

您可以更改边栏的边距而不是宽度....

这是操作方法 -

document.getElementById('close-side').addEventListener("click", function(){
    if (isOpen) {
        document.getElementById("close-side").style.marginLeft = "-100px";
        isOpen = false;
    } else {
        document.getElementById("close-side").style.marginLeft = "0px";
        isOpen = true;
    } 
})

并将按钮（关闭侧）放在边栏外 div

<img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">

<div id="side-menu" class="side-nav">  
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
</div>

现在应用以下 css 的过渡效果 -

.side-nav
{
   transition: all 0.5s ease;
}

当侧边菜单 div 接近 0px 时导航链接不隐藏

Nav links not hiding when side menu div closes to 0px

html

javascript

css

sidebar