Hallo,
Ich schaffe es einfach ncht, das menu ein und aus zu blenden.
Was mache ich verkehrt?
Gruß
Jan
Ich schaffe es einfach ncht, das menu ein und aus zu blenden.
Was mache ich verkehrt?
HTML:
<nav id="menu">
<ul>
<li><a href="#screen1">Home</a></li>
<li><a href="#screen2">Aktuelles</a>
<ul>
<li><a href="#screen3">Jahr 2017</a></li>
<li><a href="#screen3">jahr 2016</a></li>
</ul>
</li>
<li><a href="#screen3">Mitglieder</a></li>
<li><a href="#screen4">Download</a>
<ul>
<li><a href="#screen3">Newsletter</a></li>
<li><a href="#screen3">Satzung</a></li>
</ul>
</li>
<li><a href="#screen5">Kontakt</a>
<ul>
<li><a href="#screen3">Mitglied werden</a></li>
</ul>
</li>
<li class="close"><a href="" id="menuhide">↑ Menü schließen</a></li>
</ul>
</nav>
<div class="open">
<a href="" id="menushow">↓ Menü Öffnen</a>
</div>
Code:
.open{
display:none;
}
.close{
display:none;
}
@media only screen and (max-width: 1080px) {
nav {
position: fixed;
top: 0;
left: 0;
float: none;
width: 100%;
margin: 0;
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
display:none;
}
.close{
display:block;
}
.open{
display:block;
position:fixed;
top:0;
left:0;
text-align: center;
background-color: #333;
width:100%;
padding:18px 18px;
}
Code:
$(function(){
$('#menushow').click(function(){
if ( document.getElementById('menu').style.display == 'none' ) {
document.getElementById('menu').style.display = 'block';
}
});
$('#menuhide').click(function(){
if ( document.getElementById('menu').style.display == 'block' ) {
document.getElementById('menu').style.display = 'none';
}
});
Gruß
Jan