nicht angemeldet
oxo888oxoGenau, ...
OK prima.
Ich habe das nun mal genau so testweise umgesetzt.
Hier ein Link dorthin: http://spaceart.de/_xxxx_test_15.php
Wie man sehen kann, ist das Menü auch in den großen Viewports nun erstmal zugeklappt.
Das kommt ja mit Sicherheit durch meine "umgekehrte" Mobile First Reihenfolge.
Darum habe ich nun das hier in den Media Queries Bereich für die großen Viewports hinzugefügt:
.js nav ul {
display: block;
}
Um die Navigation in den großen Viewports einzublenden, da sie ja in meinem Code erstmal ausgeblendet wurde (wegen Mobile First).
Und dann habe ich noch das hier in den Media Queries Bereich für die großen Viewports hinzugefügt:
.js .menu-klappen {
display: none;
}
Um den Button für die großen Viewports auszublenden.
Ist das soweit denn erstmal alles korrekt?
Hier poste ich nochmal den kompletten Quelltext der Test-Seite:
<!doctype html>
<html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Viewport: 0px - 740px */
nav ul {
padding-left: 0;
}
nav li {
list-style: none;
}
/* Button zum Anzeigen des Menüs */
.js .menu-klappen {
display: block;
cursor: pointer;
color: #fff;
background-color: #313131;
width: 2.5rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
font-weight: normal;
}
.js nav ul {
display: none;
}
nav ul.klappen-on {
display: block;
}
nav ul.klappen-on 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;
}
/* Viewport: 740px - 960px */
@media only screen and (min-width: 46.5em) {
.menu-klappen {
display: none;
}
.js nav ul {
display: block;
}
.js .menu-klappen {
display: none;
}
}
/* Viewport: ab 960px - unendlich */
@media only screen and (min-width: 60.25em) {
}
/* Angaben für den Druck */
@media print {
}
</style>
</head>
<body>
<nav 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="#">Kategorie 1</a></li>
<li><a href="#">Kategorie 2</a></li>
<li><a href="#">Kategorie 3</a></li>
<li><a href="#">Kategorie 4</a></li>
<li><a href="#">Kategorie 5</a></li>
</ul>
</nav>
<script src="/navigation-15.js"></script>
</body>
</html>
Gunnar Bittersmann
Auge
Matthias Apsel