Geek Answers Handbook

The Mob Nav menu shows and hides when compressing media queries

If you look at the code, when you compress the page, the menu quickly appears, and then goes back. I would like it to not display at all when the page is being compressed. I do not understand why this is happening.

I assume it could be smth with transitions to #nav instead of input[type="checkbox"]:checked + #nav , but I need to have animation on #nav. I had a separate file in which I played only for mobile nav, and it worked fine. As soon as I started working with media queries, everything goes south.

here is the fiddle: 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 { 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%; max-height: 20em; 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>
+5
source share
1 answer

Just remove max-height: 20em; from #nav in a media request.

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>
+3
source

More articles:


All Articles