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

时间:2016-11-06 16:58:25

标签: jquery html css

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



/* 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;
}

<!-- 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;

enter image description here

1 个答案:

答案 0 :(得分: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>