-1
我已经接近这种汉堡菜单，但它仍然无法正常工作。任何帮助都会很棒。 （我相信这很明显，但树林和所有这些。）对于一个新手来说，似乎我的js不能正常运行/触发/无论正确的单词是什么。也许我把它链接错了？汉堡菜单不起作用
<!DOCTYPE html>
<title>Bad Doc</title>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.menu-btn').click(function(){
$('.responsive-menu').toggleClass('expand')
})
</script>
<style>
.clearfix:after {
content: "";
display: table;
clear: both;
}
.body {
margin: 0;
padding: 0;
}
a:hover {
background-color: #D3D3D3;
}
a:link {
text-decoration: none;
}
p {
font-family: "Garamond", Times, serif;
}
.wrapper {
border: 1px solid blue;
padding: 1px;
background-color: gray;
}
.main-nav {
border: 1px solid blue;
float: left;
margin: 0 5px 0 0;
}
.content {
border: 1px solid blue;
overflow: auto;
}
h1 {
font-size: 72px;
text-align: center;
margin: 0 0 20px 0;
font-family: "Garamond", Times, serif;
}
ul {
margin-right: 10px;
padding: 0 20px 0 20px;
}
li {
list-style-type:none;
font-family: "Garamond", Times, serif;
font-size: 14px;
}
.photos {
text-align: center;
}
img {
max-width: 30%;
height: auto;
opacity: 0.7;
filter: alpha(opacity=70);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
#footer p {
text-align: center;
font-size: 14px;
border: 1px solid blue;
margin: 3px 0 0 0;
padding: 3px;
background-color: gray;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
img {max-width: 70%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.content {
background-color: black;
padding-right: 0;
margin-left: 60px;
margin-right: 60px;
}
.menu-btn div{
float: left;
padding-right: 8px;
margin-top: 1em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
margin: 0;
padding: 0;
width: 100px;
float: left;
}
.responsive-menu li {
margin: 0;
padding: 0;
list-style-type: none;
}
.expand {
display: block !important;
}
<!-- nav ends here-->
</style>
</head>
<body>
<!-- added clearfix here with style at top of style list-->
<div class="wrapper clearfix">
<h1>gage</h1>
<!-- this is nav-->
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
<div class="main-nav responsive-menu">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
<!-- this is main body of page -->
<div class="content">
<div class="photos">
<a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
<a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
<a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
<a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
<a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
<a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
</div>
</div>
<!-- this is footer (inside or outside last div???) -->
</div>
<div id="footer">
<p>More stuff</p>
</div>
</body>
</html>
请新增的jsfiddle或CodePen到你的问题，而不是在这里粘贴代码。另见http://stackoverflow.com/help/mcve – Roy
@罗伊外部网站喜欢这些是礼貌，而不是要求发布问题。 – Yoshi
@Yoshi但是人们会更愿意查看codepen/JSfiddle上的代码，因为他们可以立即开始编辑/修复它。 – IdeaMan