响应式移动菜单存在问题

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">您的问题将得到解决。

我不确定最终的菜单设计是什么，但是这些更改将解决您遇到的问题。