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>