nicht angemeldet
Hallo,
schau dir mal an, wie ich das gelöst habe, vielleicht ist es auch etwas für dich. Achtung, ich arbeite hier nicht mit den neuen HTML5 Elemente wie <nav>, aber das könntest du ja umstellen wenn gewünscht
Mein HTML
<html class="no-js">
Damit prüfe ich, ob ob JS on oder off ist. In HTML5 ist es erlaubt HTML eine class mit zu geben.
<div id="navigation">
<h3 class="menu-klappen" >
<span data-icon="≡" aria-hidden="true"></span>
<span class="screen-reader-text">Menü</span>
</h3>
<ul>
<li><a href="#">erster</a></li>
<li><a href="#">zweiter</a></li>
<li><a href="#">dritter</a></li>
<li><a href="#">vierter</a></li>
<li><a href="#">fünfter</a></li>
</ul>
</div>
Hier kommt nun mein CSS
#navigation {
border-bottom: 1px solid #efefef;
background-color: #43373F;
border-radius: 4px 4px 0px 0px;
padding: 1px;
}
#navigation li {
list-style: none;
display: inline-block;
background-color: #43373F;
}
#navigation a{
text-decoration: none;
display:block;
padding: 1.5em 15% 0.75em;
color: #fff;
}
#navigation a:hover{
color:#CE6634;
}
.menu-klappen {
display: none;
}
@media screen and (max-width:880px) {
/* Button zum Anzeigen des Menüs */
.js .menu-klappen {
display: block;
cursor: pointer;
color: #efefef;
border-radius: 50%;
background-color: #645360;
width: 2.5em;
height: 2.5em;
margin: 10px auto;
text-align: center;
line-height: 2.5em;
border: 1px solid #010101;
font-weight: normal;
}
#navigation li {
-webkit-box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;
box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;
}
.js #navigation ul {
display: none;
}
#navigation ul.klappen-on {
display: block;
}
#navigation ul.klappen-on li, .no-js #navigation li {
display: block;
}
[data-icon]:before {
content: attr(data-icon);
speak: none;
display: inline-block;
font-size: 200%;
}
.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}
}
Hier noch ein JavaSCript das ohne jQuery funktioniert, da du dieses ja nicht wolltest. Das Script kommt nicht von mir, funktioniert aber 100%
( function() {
//Klasse zu html hinzufügen lassen, die kennzeichnet, dass JavaScript aktiviert ist
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
function naviklapp(navid) {
//Elemente definieren: Navigationselement, Button, Menü
var nav = document.getElementById( navid );
var button;
var menu;
//Wenn keine Navigation, dann nichts tun
if ( ! nav )
return;
//der Button ist das erste h3-Element innerhalb der Navigation
button = nav.getElementsByTagName( 'h3' )[0];
// die erste ungeordnete Liste in der Navigation ist das Menü
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button )
return;
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}
button.onclick = function() {
if ( -1 != button.className.indexOf( 'klappen-on' ) ) {
button.className = button.className.replace( ' klappen-on', '' );
menu.className = menu.className.replace( ' klappen-on', '' );
} else {
button.className += ' klappen-on';
menu.className += ' klappen-on';
}
};
}
naviklapp('navigation');
} )();;
oxo888oxo
Gunnar Bittersmann
Auge
Matthias Apsel