Question

所以我正在为学校编写一个网站。我想做一个响应和折叠的菜单。我不能让它折叠或折叠。我使用JavaScript，Css3和Html5。仅使用JavaScript，Css3和Html5可能无法实现。我会接受其他编程语言，但我宁愿用这三种语言来做。

Javascript：

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += "responsive";
} else {
    x.className = "topnav";
}
}

Html5：

<body>

 <div class="topnav" id="myTopnav">
 <ul class="topnav">
  <li><a href="index.html"><img class="home" alt="home" src="http://projekpeople.com/wp/student2/wp-content/uploads/sites/3/2015/09/home-logo-hi.png"></a></li>   
  <li><a class="subjects" href="webdesign_important.html">IMPORTANT SUBJECTS</a></li>
  <li><a class="subjects" href="webdesign_opdrachten.html">OPDRACHTEN</a></li>
  <li><a class="subjects" href="webdesign_css.html">CSS FILES</a></li>
  <li><a class="subjects" href="webdesign_donate.html">DONATE</a></li>
  <li><a class="subjects" href="webdesign_aboutme.html ">ABOUT ME</a></li>
  <li><a class="subjects" href="webdesign_form.html">FORM</a>
   <li class="icon">
<a class="menu" href="javascript:void(0);" style="font-size: 20px;"    onclick="myFunction()">☰</a>
  </li>
  </ul>
  </div>

CSS3：

.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
text-align: right;
float: right;
}

ul.topnav li {float: right;}

ul.topnav li a {
display: inline-block;
color: rgba(0, 0, 0, 0.5);
text-align: right;
padding: 16px 20px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
list-style-type: none;
height: 25px;
}

ul.topnav li a:hover {background-color: #ddd;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:1200px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
list-style-type: none;
}
}

@media screen and (max-width:1300px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
list-style-type: none;
}
ul.topnav.responsive li {
float: none;
display: inline;
list-style-type: none;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
list-style-type: none;
}
}
.menu {
text-decoration: none;
list-style-type: none;
height: 20px;
width: auto;
}

ul.topnav {
text-align: center;

}

这可能是一个愚蠢的错误，但仍然感谢你花时间帮助我的人！：d

Answer 1

尝试在“响应”之前添加空格

像这样：

x.className += " responsive"

类用空格分隔

希望就是这样。： - 。）

Answer 2

看看这是否对您有所帮助：http://codepen.io/panchroma/pen/GrJmVq

我所做的修正是：

您需要在x.className += " responsive";行的javascript中留出空格，如前面Mathew Wilcoxson和Jonathan Wood所述
其次，这个JS添加'响应'类的位置存在问题。您的CSS期望应用于<ul class="topnav">，但JS正在将其添加到<div class="topnav" id="myTopnav">

我的解决方案是将id="myTopnav"移动到ul，但是还有其他方法可以实现相同的结果。

我注意到你的CSS仍然需要工作，因为我注意到移动导航的图标会跳转，但希望这会让你再次移动。

祝你好运！

下拉菜单会显示错误

2 个答案: