Mob Nav-Menü zeigt und blendet die Medienabfrage ein Shrink

Question

Wenn Sie Code betrachten, wird beim Schrumpfen der Seite das Menü schnell angezeigt und dann wieder nach unten verschoben. Ich möchte, dass es nicht angezeigt wird, wenn die Seite verkleinert wird. Ich kann nicht verstehen, warum das passiert.

Ich nehme an, es kann etw mit Übergängen auf #nav statt input[type="checkbox"]:checked + #nav sein, aber ich brauche Animation auf #nav. Ich hatte eine separate Datei, mit der ich nur für das mobile Nav spielte, und es funktionierte gut. Sobald ich anfange, mit Medienanfragen zu arbeiten, geht es in den Süden.

hier Geige: https://jsfiddle.net/reizer/fwzsxrnt/

* {margin:0;padding:0;border:0;list-style:none;font-size:100%;font:inherit;vertical-align:baseline;} 
 
/*RESET*/ 
 
body {font: 1em Arial, Helvetica, sans-serif;} 
 
#wrapper { 
 
\t max-width: 960px; 
 
\t margin: auto; 
 
} 
 
#nav { 
 
\t display: block; 
 
\t max-height: 0em; 
 
\t overflow: hidden; 
 
\t transition: max-height 0.5s ease; 
 
\t -webkit-transition: max-height 0.5s ease; 
 
\t -moz-transition: max-height 0.5s ease; 
 
\t -o-transition: max-height 0.5s ease; 
 
} 
 
input[type="checkbox"] { 
 
\t position: absolute; 
 
\t margin-top: -100em; 
 
} 
 
input[type="checkbox"]:checked + #nav{ 
 
\t max-height: 20em; 
 
} 
 
label { 
 
\t background: #9c0; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t overflow: auto; 
 
\t padding-left: 1em; 
 
\t background-color: #9C0; 
 
\t background: -moz-linear-gradient(top, #99cc00 0%, #85b100 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc00), color-stop(100%,#85b100)); 
 
\t background: -webkit-linear-gradient(top, #99cc00 0%,#85b100 100%); 
 
\t background: -o-linear-gradient(top, #99cc00 0%,#85b100 100%); 
 
\t background: -ms-linear-gradient(top, #99cc00 0%,#85b100 100%); 
 
\t background: linear-gradient(to bottom, #99cc00 0%,#85b100 100%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99cc00', endColorstr='#85b100',GradientType=0); 
 
\t -webkit-touch-callout: none; 
 
\t -webkit-user-select: none; 
 
\t -khtml-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t user-select: none; 
 
\t color: #FFF; 
 
\t font-size: 1.6em; 
 
\t line-height: 2.6em; 
 
} 
 
label:after { 
 
\t content: "\f039"; 
 
\t float: right; 
 
\t background-color: #669900; 
 
\t padding: 0.2em 0.3em 0.1em; 
 
\t margin: 0.5em; 
 
\t font: 1.2em FontAwesome; 
 
\t border-radius: 0.3em; 
 
\t -webkit-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3); 
 
\t -moz-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3); 
 
\t box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3); 
 
} 
 

 
#nav ul li a { 
 
\t background: #690; 
 
\t border: solid #90c12f; 
 
\t border-width: 1px 0 0; 
 
\t text-decoration: none; 
 
\t padding: 1em; 
 
\t display: block; 
 
\t color: #FFF; 
 
} 
 
#nav ul li a:hover, #nav ul li a:active { 
 
\t background: #abd728; \t 
 
} 
 
@media screen and (min-width: 479px) { 
 
.d----onttouchshituntilthispoin----t { 
 
} 
 
label { 
 
\t display:none; 
 
} 
 
#nav { 
 
\t display: table; 
 
\t width: 100%; 
 
\t max-height: 20em; 
 
\t overflow: auto; 
 
} 
 
#nav ul { 
 
\t display: table-row; 
 
} 
 
#nav ul li { 
 
\t display: table-cell; 
 
} 
 
#nav ul li a { 
 
\t color: #000; 
 
\t position: relative; 
 
\t text-align: center; 
 
\t text-indent: 20px; 
 
\t border: solid #000; 
 
\t border-width: 0 1px 0 0; 
 
\t line-height: 3.4em; 
 
\t padding: 0px 20px 0px 0px; 
 
\t transition: all 0.5s ease; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
} #nav ul li:last-child a{border:none} 
 
#nav ul li a:hover { 
 
\t position: relative; 
 
\t text-indent: 0px; 
 
\t padding-right: 40px; 
 
} 
 
#nav ul li a:before { 
 
\t font-family: FontAwesome; 
 
\t content: "\f078"; 
 
\t position: absolute; 
 
\t right: 1em; 
 
\t margin-top: -0.85em; 
 
\t visibility: hidden; 
 
\t opacity: 0; 
 
\t -webkit-transition: all 0.5s ease; 
 
\t transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
\t -moz-transition: all 0.5s ease; 
 
} 
 
#nav ul li a:hover:before { 
 
\t margin-top: 0em; 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
} 
 

 
#nav ul li a ul li { 
 
\t position: absolute; 
 
\t background: #FF0; 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 0em; 
 
\t visibility: hidden; 
 
\t opacity: 0; 
 
\t border-radius: 0px 0px 5px 5px; 
 
\t -moz-border-radius: 0px 0px 5px 5px; 
 
\t -webkit-border-radius: 0px 0px 5px 5px; 
 
\t -webkit-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
\t transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
\t -o-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
\t -moz-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
} 
 
#nav ul li a:hover ul li { 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
\t height: 1em; 
 
\t -webkit-transition:height 0.5s ease; 
 
\t transition:height 0.5s ease; 
 
\t -o-transition:height 0.5s ease; 
 
\t -moz-transition:height 0.5s ease; 
 
}

<div id="wrapper"><div id="logo"></div><label for="toggle">menu</label> 
 
<input type="checkbox" id="toggle"> 
 
<div id="nav"> 
 
    <ul> 
 
     <li><a href="#">Home<ul><li></li></ul></a></li> 
 
     <li><a href="#">About<ul><li></li></ul></a></li> 
 
     <li><a href="#">Products<ul><li></li></ul></a></li> 
 
     <li><a href="#">FAQ<ul><li></li></ul></a></li> 
 
     <li><a href="#">Support<ul><li></li></ul></a></li> 
 
     <li><a href="#">Contact<ul><li></li></ul></a></li> 
 
    </ul> 
 
</div> 
 
test 
 
</div>

Answer 1

Gerade max-height: 20em; von #nav in der Abfrage Medien entfernen.

JSFiddle Here

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 
/*RESET*/ 
 

 
body { 
 
    font: 1em Arial, Helvetica, sans-serif; 
 
} 
 
#wrapper { 
 
    max-width: 960px; 
 
    margin: auto; 
 
} 
 
#nav { 
 
    display: block; 
 
    max-height: 0em; 
 
    overflow: hidden; 
 
    transition: max-height 0.5s ease; 
 
    -webkit-transition: max-height 0.5s ease; 
 
    -moz-transition: max-height 0.5s ease; 
 
    -o-transition: max-height 0.5s ease; 
 
} 
 
input[type="checkbox"] { 
 
    position: absolute; 
 
    margin-top: -100em; 
 
} 
 
input[type="checkbox"]:checked + #nav { 
 
    max-height: 20em; 
 
} 
 
label { 
 
    background: #9c0; 
 
    cursor: pointer; 
 
    display: block; 
 
    overflow: auto; 
 
    padding-left: 1em; 
 
    background-color: #9C0; 
 
    background: -moz-linear-gradient(top, #99cc00 0%, #85b100 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99cc00), color-stop(100%, #85b100)); 
 
    background: -webkit-linear-gradient(top, #99cc00 0%, #85b100 100%); 
 
    background: -o-linear-gradient(top, #99cc00 0%, #85b100 100%); 
 
    background: -ms-linear-gradient(top, #99cc00 0%, #85b100 100%); 
 
    background: linear-gradient(to bottom, #99cc00 0%, #85b100 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#99cc00', endColorstr='#85b100', GradientType=0); 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    color: #FFF; 
 
    font-size: 1.6em; 
 
    line-height: 2.6em; 
 
} 
 
label:after { 
 
    content: "\f039"; 
 
    float: right; 
 
    background-color: #669900; 
 
    padding: 0.2em 0.3em 0.1em; 
 
    margin: 0.5em; 
 
    font: 1.2em FontAwesome; 
 
    border-radius: 0.3em; 
 
    -webkit-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3); 
 
    box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3); 
 
} 
 
#nav ul li a { 
 
    background: #690; 
 
    border: solid #90c12f; 
 
    border-width: 1px 0 0; 
 
    text-decoration: none; 
 
    padding: 1em; 
 
    display: block; 
 
    color: #FFF; 
 
} 
 
#nav ul li a:hover, 
 
#nav ul li a:active { 
 
    background: #abd728; 
 
} 
 
@media screen and (min-width: 479px) { 
 
    .d----onttouchshituntilthispoin----t {} label { 
 
    display: none; 
 
    } 
 
    #nav { 
 
    display: table; 
 
    width: 100%; 
 
    overflow: auto; 
 
    } 
 
    #nav ul { 
 
    display: table-row; 
 
    } 
 
    #nav ul li { 
 
    display: table-cell; 
 
    } 
 
    #nav ul li a { 
 
    color: #000; 
 
    position: relative; 
 
    text-align: center; 
 
    text-indent: 20px; 
 
    border: solid #000; 
 
    border-width: 0 1px 0 0; 
 
    line-height: 3.4em; 
 
    padding: 0px 20px 0px 0px; 
 
    transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    } 
 
    #nav ul li:last-child a { 
 
    border: none 
 
    } 
 
    #nav ul li a:hover { 
 
    position: relative; 
 
    text-indent: 0px; 
 
    padding-right: 40px; 
 
    } 
 
    #nav ul li a:before { 
 
    font-family: FontAwesome; 
 
    content: "\f078"; 
 
    position: absolute; 
 
    right: 1em; 
 
    margin-top: -0.85em; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    } 
 
    #nav ul li a:hover:before { 
 
    margin-top: 0em; 
 
    visibility: visible; 
 
    opacity: 1; 
 
    } 
 
    #nav ul li a ul li { 
 
    position: absolute; 
 
    background: #FF0; 
 
    display: block; 
 
    width: 100%; 
 
    height: 0em; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    border-radius: 0px 0px 5px 5px; 
 
    -moz-border-radius: 0px 0px 5px 5px; 
 
    -webkit-border-radius: 0px 0px 5px 5px; 
 
    -webkit-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
    transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
    -o-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
    -moz-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s; 
 
    } 
 
    #nav ul li a:hover ul li { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    height: 1em; 
 
    -webkit-transition: height 0.5s ease; 
 
    transition: height 0.5s ease; 
 
    -o-transition: height 0.5s ease; 
 
    -moz-transition: height 0.5s ease; 
 
    }

<div id="wrapper"> 
 
    <div id="logo"></div> 
 
    <label for="toggle">menu</label> 
 
    <input type="checkbox" id="toggle"> 
 
    <div id="nav"> 
 
    <ul> 
 
     <li><a href="#">Home<ul><li></li></ul></a> 
 
     </li> 
 
     <li><a href="#">About<ul><li></li></ul></a> 
 
     </li> 
 
     <li><a href="#">Products<ul><li></li></ul></a> 
 
     </li> 
 
     <li><a href="#">FAQ<ul><li></li></ul></a> 
 
     </li> 
 
     <li><a href="#">Support<ul><li></li></ul></a> 
 
     </li> 
 
     <li><a href="#">Contact<ul><li></li></ul></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    test 
 
</div>