響應式移動菜單存在問題

Question

我該如何工作？ 我一直在擺弄代碼，但是沒有運氣。 我正在嘗試制作響應式的移動菜單。 我嘗試搜索Google，但找不到任何解決方案。 謝謝

   <div class="sidenav" id="sidenav">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;                                      
             </a>
 <a href="#">Home</a>
 <a href="#">Order</a>
 <a href="#">About</a>
 </div>
 <div class="main_header">
    <div class="main_nav">
        <span onlick="openNav()">&#9776</span>
    </div>
     <h1>Treat your tastebuds</h1>
    <a href="#" class="btn_one">Order a coffee</a>
 </div>
 <script type="text/javascript">
    function openNav() {
        document.getElementById("main_nav").style.width = "100%";
     }
    function closeNav(){
        document.getElementById("closeNav").style.width="0";
    }
  </script>

這是CSS

.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center; 
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}

Answer 1

使用引導框架是一種選擇。

這是一個提供側面導航的示例。

https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

Answer 2

您的代碼中有各種錯別字，還有嘗試操作的未定義元素。

首先，您有： <span onlick="openNav()">&#9776</span> ，其中包含一個錯字。 它是“ onclick”，而不是“ onlick”。

接下來，您嘗試操作元素“ main_nav”，但是在HTML和CSS中，您將main_nav定義為一個類（使用句點）。 因此，如果將html更改為<div class="main_nav">您的問題將得到解決。

我不確定最終的菜單設計是什么，但是這些更改將解決您遇到的問題。