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

Question

我正在创建一个需要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>

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>