响应式手机菜单问题

我该如何做这项工作？我一直在纠缠着代码，但我没有运气。我正在尝试制作一个响应式手机菜单。我试图搜索谷歌，并找不到任何解决方案。由于响应式手机菜单问题

<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; 
}

来源

2017-03-28 jcdumdumaya