Mein Problem ist das sich ein bild nach dem klick aufn anderen nicht zeigt. Ich bin ratlos woran es liegen kann.
CSS:
Conner
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Landpage</title> <link rel="stylesheet" href="index.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.menubutton').click(function() { $('nav').slideToggle('slow'); $('.menubutton').hide(); $('.menuclose').show(); }); $('.menu_close').click(function() { $('nav').slideToggle('slow'); $('.menuclose').hide(); $('.menubutton').show(); }); }); </script> </head> <body> <a class="menubutton" href="#menu"><img src="images/menu-button.jpg"></a> <a class="menuclose" href="#menuclose"><img src="images/menu_schließen.jpg"></a> <nav id="navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> <li><a href="#">test3</a></li> </ul> </nav> </body> </html>
Code:
/*Menu button*/
a.menubutton img{
width: 3%;
margin: 0px auto;
position: absolute;
left:0;
display: none;
}
a.menuclose img{
width: 3%;
margin: 0px auto;
position: absolute;
left: 0;
display: none;
}
@media screen and ( max-width: 630px ){
a.menubutton img{
width: 15%;
margin: 0px auto;
position: absolute;
display: block;
top:0;
}
nav#navi{
display: none;
}
}
}
Kommentar