Question

如何使这项工作？我一直在摆弄代码，但我没有运气。我正在尝试制作响应式移动菜单。我试过搜索谷歌，找不到任何解决方案。感谢

   <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

使用bootstrap框架是一种选择。

这是一个提供侧面导航的示例。

MySQL

Answer 2

您的代码中存在各种拼写错误以及您尝试操作的未定义元素。

首先，您有：<span onlick="openNav()">&#9776</span>，其中包含拼写错误。这是'onclick'，而不是'onlick'。

接下来，您尝试操作元素“main_nav”，但在HTML和CSS中，您将main_nav定义为一个类（使用句点）。因此，如果您将html更改为<div class="main_nav">，那么您的问题将得到解决。

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

响应式移动菜单的问题

2 个答案: