मीडिया क्वेरी पर मोब एनवी मेनू शो और छुपाएं

Question

यदि आप पृष्ठ को कम करते समय कोड देखते हैं, तो मेनू जल्दी से दिखाई देता है और फिर नीचे स्लाइड करता है। मैं पेज को छोटा होने पर बिल्कुल दिखाना नहीं चाहता हूं। मैं समझ नहीं पा रहा हूं कि यह क्यों हो रहा है।

मुझे लगता है कि input[type="checkbox"]:checked + #nav के बजाय #nav पर संक्रमण के साथ इसे धुंधला हो सकता है, लेकिन मुझे #nav पर एनीमेशन होना चाहिए। मेरे पास सिर्फ अलग-अलग फाइल थी जो मैंने मोबाइल नौसेना के साथ खेला था और यह ठीक काम करता था। जैसे ही मैंने मीडिया प्रश्नों के साथ काम करना शुरू किया, चीजें दक्षिण में जाती हैं। 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

बस मीडिया क्वेरी में #nav से max-height: 20em; निकालें:

यहाँ बेला है।

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>