Hallo, ich habe eine Navigation gemacht mit 8 Punkten will aber, je nach media einen punkt ausblenden bzw deaktivieren (nicht nur verstecken)
HTML
<nav>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7 </a></li>
<extra><li><a href="#">8</a></li></extra>
</ul>
</nav>
Alles anzeigen
Jetzt möchte ich aber über medias einen der li ein bzwe ausblenden. ich habe mir gedacht ich versuche es mit
es wird zwar ausgeblendet bzw eingeblendet , aber nicht deaktiviert... es ist im hide modus... das ist doof, weil ich dann leerraum habe (sieht man am roten debugger div dahinter)... dachte collapse deaktiviert ein element, nicht nur wie hidden verstecken? hmm.... achja, hier der css:
CSS
#Navigation{
background-color: red;
max-width: 950px;
height
}
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 100%;
margin: 0px auto;}
nav ul {
list-style: none;
overflow: hidden;}
nav li a {
background: #FFFFFF;
font-size: 12px;
color: #fff;
display: block;
float: left;
text-align: center;
text-decoration: none;
width: 14.28571428571429%;
}
nav li a {
display: block;
float: left;
width: 14.28571428571429%;
padding: 10px;
background: #444;
border-right: 1px solid blue;
color: #fff;
text-align: center;
text-decoration: none;
text-height: 40px;}
nav li a {
background-image: linear-gradient(to top, gray 50%, black 50%);
border-right: 1px solid blue;
color: #fff;
display: block;
float: left;
padding: 10px;
text-align: center;
text-decoration: none;
width: 14.28571428571429%;
height: 40px;
/*TRANSISTIONS*/
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-ms-transition: background 0.8s ease;
transition: background 0.8s ease;}
/*HOVER*/
nav li a:hover {
background: #222;}
nav li:last-child a {
border: none;}
extra {
visibility: collapse;
}
/* MEDIA QUERIES*/
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
extra{visibility: visible}
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
}
nav li:last-child a, nav li:nth-child(4) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
border-bottom: none;
}
}
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
extra{visibility: visible}
nav li a {
width: 50%;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: 1px solid #fff;
}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
nav li a {
extra: visibility: visible;
font-size: 10px;
}
}
Alles anzeigen