如果您查看代码,当缩小页面时,菜单会快速显示,然后向下滑动.当页面缩小时,我希望它根本不显示.我不明白为什么会这样.
我假设它可能是#nav而不是input [type =“checkBox”]的转换:检查#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 { 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,#85b100 100%); background: -o-linear-gradient(top,#85b100 100%); background: -ms-linear-gradient(top,#85b100 100%); background: linear-gradient(to bottom,#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.3); -moz-Box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0.3); Box-shadow: inset 0em 0.1em 0.2em 0em rgba(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,visibility 0.0s ease 0.5s; -o-transition: height 0.5s ease,visibility 0.0s ease 0.5s; -moz-transition: height 0.5s ease,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>
解决方法
只需删除max-height:20em;来自媒体查询中的#nav.
* { margin: 0; padding: 0; border: 0; list-style: none; font-size: 100%; font: inherit; vertical-align: baseline; } /*RESET*/ body { font: 1em Arial,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,#85b100 100%); background: -webkit-gradient(linear,#85b100)); background: -webkit-linear-gradient(top,#85b100 100%); background: -o-linear-gradient(top,#85b100 100%); background: -ms-linear-gradient(top,#85b100 100%); background: linear-gradient(to bottom,#85b100 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#99cc00',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.3); -moz-Box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0.3); Box-shadow: inset 0em 0.1em 0.2em 0em rgba(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,visibility 0.0s ease 0.5s; transition: height 0.5s ease,visibility 0.0s ease 0.5s; -o-transition: height 0.5s ease,visibility 0.0s ease 0.5s; -moz-transition: height 0.5s ease,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。