Hey zusammen,
ich habe nun ein Dropdown-Menü selbst erstellt. Es funktioniert auch alles.
Eines verstehe ich nur nicht. Wenn ich auf den Button Menü aufklicke wird mir das Menü angezeigt sowie ein Button zum Schließen des Menüs.
Wenn ich nun die Seite größer machen sollte nach den CSS-Angaben eigentlich das Menü normal dargestellt werden und nicht als Dropdown-Menü.
Aber das tut es nicht. Das Menü bleibt dann vorhanden. Erst, wenn ich die Seite neu Lade wird wieder alles normal angezeigt.
Ist das normal?
Grüße,
Stef
Code
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
*{
margin: 0%;
padding: 0%;
}
header{
margin-bottom: 2%;
}
/* Navigation */
nav#navigation{
display: flex;
padding: 1%;
background-color: #778899;
}
#navigation .navBrand{
flex-direction: row;
width: 60%;
}
.navBrand a{
text-decoration: none;
color: orange;
font-size: 16pt;
}
.navBrand a:hover{
text-shadow: 2px 2px #cc7b24;
}
#navigation .navFlex{
flex-direction: row;
width: 40%;
}
.navFlex ul li{
display: inline;
list-style-type: none;
margin-right: 5%;
}
.navFlex ul li a{
text-decoration: none;
color: black;
font-size: 16pt;
}
.navFlex ul li a:hover{
border-bottom: 2px solid black;
text-shadow: 1px 1px rgba(0, 0, 0, 0.65);
}
/* Responsive Design */
#dropdown button#closeMenu, #dropdown button#openMenu{
display: none;
}
.dropdownButtons{
padding: 2% 1em;
background-color: cyan;
color: black;
border: 0;
box-shadow: 2px 5px rgba(0, 187, 204, 0.51);
}
@media screen and (max-width: 1430px) {
#dropdown button#openMenu{
display: block;
}
.navFlex{
display:none;
}
.show{
display:block;
}
.navFlex ul li{
display: block;
margin-right: 1.5%;
margin-bottom: 20px;
}
.navFlex ul li a{
text-decoration: none;
color: black;
font-size: 16pt;
}
.navFlex ul li a:hover{
border-bottom: 2px solid black;
}
}
</style>
</head>
<body>
<header>
<nav id="navigation">
<div class="navBrand">
<a href="#">Brand</a>
</div>
<div class="navFlex" id="menu">
<ul>
<li><a href="#">Menüpunkt1</a></li>
<li><a href="#">Menüpunkt2</a></li>
<li><a href="#">Menüpunkt3</a></li>
<li><a href="#">Menüpunkt4</a></li>
</ul>
</div>
<div id="dropdown">
<button id="openMenu" class="dropdownButtons">Menü auf</button>
</div>
</nav>
</header>
<script>
window.onload = function(){
function hide(){
var menu=document.getElementById("menu");
menu.classList.toggle("show");
var self = document.getElementById('openMenu');
if(menu.classList.contains('show')){
self.innerHTML='Menü zu';
}else{
self.innerHTML='Menü auf';
}
}
document.getElementById('openMenu').addEventListener("click", hide);
}
</script>
</body>
</html>