Hallo Zusammen,
ich komme bei folgendem Schritt leider nicht mehr weiter: Ich möchte bei einer responsive Webseite meine Navigationsleisten-punkte für einen Smartphonescreen mit einem Button öffnen. Dazu habe ich eine extra Menüleiste eingebaut, mit einem Bild als Button. Diese Leiste wird bei einem Desktop Bildschirm nicht, dafür aber bei einem Smartphone angezeigt. Jetzt sollen nun meine Ursprünglichen Punkte der Navigationsbar mit dem Button auf und zu gemacht werden können. Leider funktioniert es bei mir nicht so wie gewünscht. Ich freue mich, wenn sich das jemand mal anschauen kann.
liebe Grüße
Code
Html:
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="Bilder/Menübutton.png"></a></li>
</ul>
</section>
<nav class="navbar navbar-expand navbar-light mt-3" >
<button type="button" class="btn btn-success"><a href="good.html">Gut zu wissen!</a></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://play" target="_blank"><b class="text-light">      Aktuell</b><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://developer" target="_blank"><b class="text-light">Projekte</b><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b class="text-light">Basics</b>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://www.you" target="_blank">Html</a>
<a class="dropdown-item" href="https://www.you" target="_blank">CSS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://developer" target="_blank">Programmieren lernen</a>
</div>
</li>
</ul>
<a class="nav-link" href="#Impressum" > <i class="far fa-id-card display-4" data-toggle="tooltip" data-placement="bottom" title="Impressum"></i> <span class="sr-only">(current)</span></a>
</div>
</nav>CSS
CSS:
#menubar{
display:block;
background:white;
}
#menubar ul {
display:block;
width:2em;
padding:0.9em;
}
#menubar ul li {
display:inline;
}
#menubar ul li a.menubutton{
display:none;
}
@media screen and (min-width:550px){
.navbar-expand{
display:block !important;
}
}
@media screen and (max-width:550px){
#menubar ul li a.menubutton{
display:block;
}
.navbar-expand {
display:none;
height:auto;
}
.navbar-expand ul li{
display:block;
margin: 0.3em 0em 0.3em 0em;
}Code
Java-Script:
<script>
$(document).ready(function() {
$('.menubutton').click(function(){
$('.navbar-expand').slideToggle('slow');
});
});
</script>
