响应式导航变得与显示器弹性一起跳跃(responsive navigation getting jumpy with display flex)
所以，我试图重新管理我之前的项目并将其更改为flex。 由于ul元素是阻塞而导致混乱，我使用JavaScript将其更改为显示flex。
这是小提琴
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$(menu).css("display", "flex");
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
header{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
header #logo{
width:15%;
position:absolute;
top:0;
left:0;
z-index:2;
}
#logo img{
width:100%;
}
header nav{
width:100%;
position:relative;
z-index:1;
}
nav ul.clearfix{
width:100%;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
ul.clearfix a{
list-style:none;
text-decoration:none;
border:solid 2px #e74c3c;
padding:8px 0px;
width:12%;
max-width:300px;
font-size:15px;
color:#e74c3c;
text-align:center;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
ul.clearfix a:nth-child(n+2){
margin-left:-1px;
}
ul.clearfix a:hover{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
ul.clearfix #currentPage{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
/*default*/
@media screen and (max-width: 768px) {
header{
height:50px;
justify-content:flex-start;
}
nav {
z-index:2;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:50px;
border-bottom: 0;
}
nav a#pull{
line-height:50px;}
nav ul.clearfix {
width:100%;
display: none;
height: auto;
background:#ccc;
position:relative;
flex-direction:column;
z-index:2;
}
ul.clearfix a{
border-bottom:1px dotted black;
font-size:14px;
width:100%;
position:relative;
height:50px;
text-align:center;
z-index:2;
}
ul.clearfix a:first-child{
border-top:1px dotted black;
margin-top:50px;
}
nav a#pull {
display: flex;
position: absolute;
align-items:flex-start;
justify-content:flex-start;
padding-left:10px;
right:10px;
top:5px;
}
nav a#pull:after {
background:#ccc;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
line-height:50px;
right:15px;
top:0px;}
div#burger{
width:20px;
height:20px;
position: absolute;
right:0px;
top:0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index:4;}
div#burger span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: red;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#burger span:nth-child(1){top: 0px;}
#burger span:nth-child(2){top: 7px;}
#burger span:nth-child(3){top: 14px;}
#burger.open span:nth-child(1){
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#burger.open span:nth-child(2){
opacity: 0;
left: -30px;
}
#burger.open span:nth-child(3){
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}
/*default Portrait*/
@media screen and (max-width: 773px) and (orientation: portrait) {
div#logo{
width:30%;
}
}
/* iPad Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
div#logo{
width:20%;}
}
/* iPad Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
header{
width:100%;
height:80px;
}
div#logo {
width: 25%;}
nav {
width: 65%;}
}
/*default Landscape*/
@media screen and (max-width: 773px) and (orientation: landscape) {
div#logo{
width:20%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sameThisHeight">
<div id="logo" class="logo">
<img src="assets/Logo.png">
</div>
<nav class="clearfix">
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
<a href="registration.php">REGISTRATION</a>
<a href="tutorial.php">TUTORIAL</a>
<a href="contact.php">CONTACT US</a>
</ul>
<a href="#" id="pull">
<div id="burger">
<span></span>
<span></span>
<span></span>
</div>
</a>
</nav>
</header>
事情是，
当我试图在第一次点击汉堡时它来回晃动它就像它有什么问题一样。
第二次打开汉堡时，它会导致导航器坍塌，并且它很好，不会不是不好，实际上并不好。
不知何故，序列改变了用于打开导航的“x”按钮和用于关闭导航的“汉堡图标”。 绝对不行。
我不知道我做错了什么，正确的事情应该是我做的“x”按钮关闭导航和“汉堡图标”打开导航的反面。
我的想法是因为我在我的JavaScript中插入了它
$(menu).css("display", "flex");
因为，在我将它添加到我的javascript之前，它确实表现不错，但不足以与设计相匹配。 最后一个项目我做得很好因为没有使用flex而且直接使用UL LI标签。 无论如何要解决这个问题，并继续使用flex吗？ 请帮忙。
so, I tried to remaster my previous projects and change it into flex. and it getting messed up because of ul element is block and I changed it using JavaScript into a display flex.
this is the fiddle
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$(menu).css("display", "flex");
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
header{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
header #logo{
width:15%;
position:absolute;
top:0;
left:0;
z-index:2;
}
#logo img{
width:100%;
}
header nav{
width:100%;
position:relative;
z-index:1;
}
nav ul.clearfix{
width:100%;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
ul.clearfix a{
list-style:none;
text-decoration:none;
border:solid 2px #e74c3c;
padding:8px 0px;
width:12%;
max-width:300px;
font-size:15px;
color:#e74c3c;
text-align:center;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
ul.clearfix a:nth-child(n+2){
margin-left:-1px;
}
ul.clearfix a:hover{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
ul.clearfix #currentPage{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
/*default*/
@media screen and (max-width: 768px) {
header{
height:50px;
justify-content:flex-start;
}
nav {
z-index:2;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:50px;
border-bottom: 0;
}
nav a#pull{
line-height:50px;}
nav ul.clearfix {
width:100%;
display: none;
height: auto;
background:#ccc;
position:relative;
flex-direction:column;
z-index:2;
}
ul.clearfix a{
border-bottom:1px dotted black;
font-size:14px;
width:100%;
position:relative;
height:50px;
text-align:center;
z-index:2;
}
ul.clearfix a:first-child{
border-top:1px dotted black;
margin-top:50px;
}
nav a#pull {
display: flex;
position: absolute;
align-items:flex-start;
justify-content:flex-start;
padding-left:10px;
right:10px;
top:5px;
}
nav a#pull:after {
background:#ccc;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
line-height:50px;
right:15px;
top:0px;}
div#burger{
width:20px;
height:20px;
position: absolute;
right:0px;
top:0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index:4;}
div#burger span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: red;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#burger span:nth-child(1){top: 0px;}
#burger span:nth-child(2){top: 7px;}
#burger span:nth-child(3){top: 14px;}
#burger.open span:nth-child(1){
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#burger.open span:nth-child(2){
opacity: 0;
left: -30px;
}
#burger.open span:nth-child(3){
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}
/*default Portrait*/
@media screen and (max-width: 773px) and (orientation: portrait) {
div#logo{
width:30%;
}
}
/* iPad Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
div#logo{
width:20%;}
}
/* iPad Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
header{
width:100%;
height:80px;
}
div#logo {
width: 25%;}
nav {
width: 65%;}
}
/*default Landscape*/
@media screen and (max-width: 773px) and (orientation: landscape) {
div#logo{
width:20%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sameThisHeight">
<div id="logo" class="logo">
<img src="assets/Logo.png">
</div>
<nav class="clearfix">
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
<a href="registration.php">REGISTRATION</a>
<a href="tutorial.php">TUTORIAL</a>
<a href="contact.php">CONTACT US</a>
</ul>
<a href="#" id="pull">
<div id="burger">
<span></span>
<span></span>
<span></span>
</div>
</a>
</nav>
</header>
The thing is,
when i tried to clicked the burger at the first time it's back and forth like it has something wrong with it.
and the second time i opened the burger, it collapse the nav and it did good, no no it's not good actually it's not good at all.
Somehow the sequence has changed the "x" button for the opening the nav and the "burger icon" to close the nav. It definetly not ok.
I don't know for what i did so wrong about it, the right thing should be in place is the opposite of what i did the "x" button for close the nav and the "burger icon" to open up the nav.
My thought was because I inserted this in my JavaScript
$(menu).css("display", "flex");
Because, before i adding this into my javascript it did good performance but not good enough to match with the design. the last project i did fine because of not using flex and go stright with UL LI tags. is there anyway to solve this problem, and keep using flex for it? please help.
最满意答案
这行会在第一次点击时导致问题。 你应该在slideToggle();之后放置display: flex slideToggle(); ，我应该指出它不会像slideToggle();那样平滑过渡slideToggle(); 把display: block; 。 你应该做一个css解决方案，或者围绕<ul>...</ul>制作一个容器。
if ($('#burger').hasClass("open")) {
//here you set it to be display
$(menu).css("display", "flex");
$("section").css("z-index", 1);
//here you toggle display, which will be flex, so you hide it
menu.slideToggle();
}
改为（ 小提琴 ，我为你的造型改了一下你的造型，你可以自由使用）
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
你的html / css有一些问题，应该重新加工。 <ul>必须包含<li>
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
<a href="registration.php">REGISTRATION</a>
<a href="tutorial.php">TUTORIAL</a>
<a href="contact.php">CONTACT US</a>
</ul>
应该
<ul class="clearfix">
<li><a id="currentPage" href="index.php">HOME</a></li>
<li><a href="registration.php">REGISTRATION</a></li>
<li><a href="tutorial.php">TUTORIAL</a></li>
<li><a href="contact.php">CONTACT US</a></li>
</ul>
另外，为什么在不使用float时使用class clearfix ？ 我从来没有像你在这种情况下那样定位一个clearfix类的样式，而是给它一类navigation或其他东西。
This lines causes the issue on first time clicking. You should put the display: flex after the slideToggle();, I should point out that it will not be a smooth transition as the slideToggle(); puts the display: block;. You should maybe do a css solution or maybe make a container around the <ul>...</ul>.
if ($('#burger').hasClass("open")) {
//here you set it to be display
$(menu).css("display", "flex");
$("section").css("z-index", 1);
//here you toggle display, which will be flex, so you hide it
menu.slideToggle();
}
change to (fiddle, I changed your styling a bit for demo, you are free to use your own)
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Your html/css has some issues and should be re-worked. The <ul> has to contain <li>
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
<a href="registration.php">REGISTRATION</a>
<a href="tutorial.php">TUTORIAL</a>
<a href="contact.php">CONTACT US</a>
</ul>
should be
<ul class="clearfix">
<li><a id="currentPage" href="index.php">HOME</a></li>
<li><a href="registration.php">REGISTRATION</a></li>
<li><a href="tutorial.php">TUTORIAL</a></li>
<li><a href="contact.php">CONTACT US</a></li>
</ul>
Also why do you use the class clearfix when you are not using float? I never target a clearfix class for styling as you do in this case, rather give it a class of navigation or something.
更多推荐
发布评论