我对尝试理解 javascript 还很陌生，我似乎无法弄清楚如何编写汉堡菜单代码以在移动 View 中打开和显示我的导航。我可以在桌面上进行主导航，并在这些 View 中看到我想要的移动设备和平板电脑的外观，但按钮不起作用。我在那里有一些我尝试过的 javascript，但它没有用。我会把所有内容都放在一个片段中，这样也许有人可以帮助我理解这一点。谢谢你!
$('.toggle').click(function () {
"use strict";
$('nav ul').slideToggle();
});
$(window).resize(function () {
"use strict";
if ($(window).width() > 780) {
$('nav ul').removeAttr('style');
}
});/* Start global */
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: arial, tahoma;
list-style: none;
/* outline: 1px solid brown;*/
}
/* End global */
header {
background-color: #333;
height: 500px;
}
/* Start navigation bar */
nav {
height: 80px;
background-color: #222;
border-bottom: 1px solid #555
}
.logo {
padding: 10px;
width: auto;
float: left;
}
.logo img {
height: 55px;
}
.list-item {
float: right;
margin-right: 25px;
margin-top: 17px;
}
.list-item li {
float: left;
padding: 13px 13px;
font-size: 18px;
border-radius: 3px;
transition: all .7s ease-in-out;
}
.list-item li a {
color: #EEE;
}
.list-item li:hover {
background-color: brown;
}
/* End navigation bar */
/* Start nav bar for small screens */
.icon {
display: none;
}
.toggle {
float: right;
margin: 20px;
color: #EEE;
font-size: 30px;
border: 1px solid #EEE;
padding: 0px 5px;
border-radius: 4px;
cursor: pointer;
}
/* End nav bar for small screens */
/* Start media query */
@media (max-width: 775px) {
.icon {
display: block;
width: 100%;
height: 80px;
background-color: #111;
border-bottom: 1px solid #444;
}
.list-item {
width: 100%;
margin: 0;
padding: 0;
position: relative;
top: -4px;
background-color: #222;
display: none;
}
.list-item li {
text-align: center;
display: block;
border-bottom: 1px solid #333;
float: none;
}
.result-iframe {
border: 0;
background: white;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* End media query */
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="about.css" rel="stylesheet">
<link href="about.js" rel="alternate">
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ec/13/a7/ec13a753972c254761be4d9d5666d341.jpg" />
</div>
<div class="icon">
<span class="toggle">☰</span>
</div>
<ul class="list-item">
<li><a href="#">Home</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Categorys</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
</header>
</body>
</html>最佳答案
我添加了 jQuery，它似乎工作正常。
$('.toggle').click(function () {
"use strict";
$('nav ul').slideToggle();
});
$(window).resize(function () {
"use strict";
if ($(window).width() > 780) {
$('nav ul').removeAttr('style');
}
});/* Start global */
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: arial, tahoma;
list-style: none;
/* outline: 1px solid brown;*/
}
/* End global */
header {
background-color: #333;
height: 500px;
}
/* Start navigation bar */
nav {
height: 80px;
background-color: #222;
border-bottom: 1px solid #555
}
.logo {
padding: 10px;
width: auto;
float: left;
}
.logo img {
height: 55px;
}
.list-item {
float: right;
margin-right: 25px;
margin-top: 17px;
}
.list-item li {
float: left;
padding: 13px 13px;
font-size: 18px;
border-radius: 3px;
transition: all .7s ease-in-out;
}
.list-item li a {
color: #EEE;
}
.list-item li:hover {
background-color: brown;
}
/* End navigation bar */
/* Start nav bar for small screens */
.icon {
display: none;
}
.toggle {
float: right;
margin: 20px;
color: #EEE;
font-size: 30px;
border: 1px solid #EEE;
padding: 0px 5px;
border-radius: 4px;
cursor: pointer;
}
/* End nav bar for small screens */
/* Start media query */
@media (max-width: 775px) {
.icon {
display: block;
width: 100%;
height: 80px;
background-color: #111;
border-bottom: 1px solid #444;
}
.list-item {
width: 100%;
margin: 0;
padding: 0;
position: relative;
top: -4px;
background-color: #222;
display: none;
}
.list-item li {
text-align: center;
display: block;
border-bottom: 1px solid #333;
float: none;
}
.result-iframe {
border: 0;
background: white;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* End media query */
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="about.css" rel="stylesheet">
<link href="about.js" rel="alternate">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ec/13/a7/ec13a753972c254761be4d9d5666d341.jpg" />
</div>
<div class="icon">
<span class="toggle">☰</span>
</div>
<ul class="list-item">
<li><a href="#">Home</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Categorys</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
</header>
</body>
</html>关于javascript - 带有汉堡菜单的响应式导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43360237/