Question

CodePen

function openNav() {
    document.getElementById("mynav").style.width = "100vw";
}
 function closeNav() {
    document.getElementById("mynav").style.width = "0vw";
}

 html,body{
    height:100vh;
    background:grey;
    font-family: 'Special Elite', cursive;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
   }
  .item{
  font-size:100px;
  }
  .nav{
  z-index:1;
  height:100%;
  width:0;
  position:fixed;
  top:0;
  left:0;
  background:#111;
  transition: 0.5s;
  }
  .open{
  position:fixed;
  left:0;
  top:0;
  padding:20px;
  font-size:30px;
  }
  .open:hover{
  color:#f1f1f1;
  }
  .close{
  position:absolute;
  top:0;
  right:0;
  padding:20px;
  color:#818181;
  font-size:60px;
  }
  .close:hover{
  color:#f1f1f1;
  }

 <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">

<div class='item'>G. Chen's Drawings</div>

<div class='nav' id='mynav'>
 <a class="close" onclick="closeNav()">&times;</a>
 <img src="https://user-images.githubusercontent.com/24628125/31184132-90a37a5a-a8f6-11e7-89ba-4bc8ca7484d8.png" alt="horse eye" width="200" height="100">
</div>

<span onclick="openNav()" class='open'>&#9776 Gallery</span>

马眼图像阻挡了菜单按钮。但我将<img>放在侧面导航<div>内。当侧导航器向左限制时，马眼只是停留在外面并且不会出现。为什么呢？

您需要移除<img>才能看到打开侧面导航菜单的按钮。按下打开按钮，侧面导航出来。我希望马眼图像在侧面导航内。当sidenav关闭时，图像应该与它一起消失。

Answer 1

您需要添加

overflow: hidden;

到.nav

的样式

否则溢出（超出声明的宽度）将可见。

工作示例：

function openNav() {
    document.getElementById("mynav").style.width = "100vw";
}
 function closeNav() {
    document.getElementById("mynav").style.width = "0vw";
}

html,body{
    height:100vh;
    background:grey;
    font-family: 'Special Elite', cursive;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
   }
  .item{
  font-size:100px;
  }
  .nav{
  z-index:1;
  height:100%;
  width:0;
  position:fixed;
  top:0;
  left:0;
  background:#111;
  transition: 0.5s;
  overflow: hidden;
  }
  .open{
  position:fixed;
  left:0;
  top:0;
  padding:20px;
  font-size:30px;
  }
  .open:hover{
  color:#f1f1f1;
  }
  .close{
  position:absolute;
  top:0;
  right:0;
  padding:20px;
  color:#818181;
  font-size:60px;
  }
  .close:hover{
  color:#f1f1f1;
  }

<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">

<div class='item'>G. Chen's Drawings</div>

<div class='nav' id='mynav'>
 <a class="close" onclick="closeNav()">&times;</a>
 <img src="https://user-images.githubusercontent.com/24628125/31184132-90a37a5a-a8f6-11e7-89ba-4bc8ca7484d8.png" alt="horse eye" width="200" height="100">
</div>

<span onclick="openNav()" class='open'>&#9776 Gallery</span>

Answer 2

赋予内部元素最大宽度100％

Answer 3

nav没有消失，它只有width: 0，这使它不可见。但它仍然在那里，并作为眼睛的父母＃34;。由于那个绝对定位，它也可以出现在其父母的边界之外。

增加：

如果你使导航器宽100px（就像这里：https://codepen.io/anon/pen/mBqaYE?editors=1100），那么眼睛的全宽仍然存在 - 出于同样的原因：绝对位置使其独立于其父级的边界。 / p>

Answer 4

你不应该改变宽度。你应该改变的是导航的左侧位置。这是一个工作示例https://codepen.io/kingychiu/pen/MEOZMB。

JS：

  function openNav() {
      document.getElementById("mynav").style.left = "0px";
    }

    function closeNav() {
      document.getElementById("mynav").style.left = "-100vw";
    }

CSS：

.nav{
  z-index:1;
  height:100%;
  width:100vw;
  position:fixed;
  top:0;
  left:-100vw;
  background:#111;
  transition: 0.5s;
  }

当较大的元素消失时，为什么另一个元素中的元素不会消失？

4 个答案: