我正在创建一个需要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()">×</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()">☰</span>
</div>
</div>
<!-- Scripts -->
<script>
function openNav() {
document.getElementById("sidenav").style.width = "100";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
</script>
&#13;
答案 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()">×</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()">☰</span>
</div>
</div>