100％宽度侧导航面板未扩展

Question

我正在创建一个需要100％宽度导航面板的项目，我无法进行扩展。当我点击汉堡包按钮时，没有任何反应。我认为它可能是我的z-index但是，我试图正确地分层，但无济于事。那么，有人知道发生了什么事吗？

＆＃13;

＆＃13;

/* Navigation Panel */

.navigation-panel {
  height: 100vh;
  width: 0;
  position: absolute;
  display: block;
  z-index: 1;
  top: 0;
  left: 0;
  background: #901536;
  overflow-x: hidden;
  transition: 0.5s;
}
/* Navigation Bar */

.navigation-bar {
  text-align: right;
  padding: 20px;
  color: #fff;
}
.navigation-bar h3 {
  float: left;
  text-transform: uppercase;
}
.navigation-bar span {
  font-size: 20px;
  cursor: pointer;
}
/* Header Section */

.header {
  height: 80vh;
  background: #fff url(../img/bg.jpg);
  background-size: cover;
  text-align: center;
}

＆＃13;

<!-- Navigation Panel -->
<div class="navigation-panel" id="sidenav">
  <a href="javascript:void(0)" onClick="openNav()">&times;</a>
  <a id="active">Home</a>
  <a>Who We Are</a>
  <a>Our Teams</a>
  <a>Catch Us</a>
  <a>Info</a>
</div>

<!-- Header -->
<div class="header">
  <div class="navigation-bar">
    <h3>Central Coast Crushers</h3>
    <span onclick="closeNav()">&#9776;</span>
  </div>
</div>

<!-- Scripts -->
<script>
  function openNav() {
    document.getElementById("sidenav").style.width = "100";
  }

  function closeNav() {
    document.getElementById("sidenav").style.width = "0";
  }
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查您正在呼叫的功能...标题中应为openNav()，而不是closeNav() 和JS宽度赋值中的百分比（％）符号应该这样做。

function openNav() {
  document.getElementById("sidenav").style.width = "100%";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}

/* Navigation Panel */

body * {
  background-color: black;
}
.navigation-panel {
  height: 100vh;
  width: 0%;
  display: block;
  z-index: 1;
  top: 0;
  position: absolute;
  left: 0;
  background: #901536;
  overflow-x: hidden;
  transition: 0.5s;
}
/* Navigation Bar */

.navigation-bar {
  text-align: right;
  padding: 20px;
  color: #fff;
}
.navigation-bar h3 {
  float: left;
  text-transform: uppercase;
}
.navigation-bar span {
  font-size: 20px;
  cursor: pointer;
}
/* Header Section */

.header {
  height: 80vh;
  background: #fff url(../img/bg.jpg);
  background-size: cover;
  text-align: center;
}

<div class="navigation-panel" id="sidenav">
  <a href="javascript:void(0)" onClick="closeNav()">&times;</a>
  <a id="active">Home</a>
  <a>Who We Are</a>
  <a>Our Teams</a>
  <a>Catch Us</a>
  <a>Info</a>
</div>

<!-- Header -->
<div class="header">
  <div class="navigation-bar">
    <h3>Central Coast Crushers</h3>
    <span onclick="openNav()">&#9776;</span>
  </div>
</div>