-1
Ich habe mit diesem Hamburger-Menü etwas in der Nähe, aber es funktioniert immer noch nicht. Jede Hilfe wäre großartig. (Ich bin sicher, es ist offensichtlich, aber Wald für die Bäume und all das.) Zu einem Newb scheint es, als ob meine js nicht funktioniert/Triggerung/was auch immer das richtige Wort ist. Vielleicht habe ich es falsch verlinkt?Hamburger Menü funktioniert nicht
<!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>
Bitte einen JSFiddle oder CodePen auf Ihre Frage, anstatt nur den Code hier einzufügen. Siehe auch http://StackOverflow.com/Help/Mcve – Roy
@Roy Externe Seiten mag diese sind eine Höflichkeit, keine Voraussetzung, Fragen zu stellen. – Yoshi
@Yoshi Aber Leute werden mehr motiviert sein, Code auf Codepen/JSfiddle zu untersuchen, weil sie anfangen können, es sofort zu bearbeiten. – IdeaMan