響應式導航越來越跳躍顯示柔性

所以，我試圖重新修改我以前的項目，並將其更改爲flex。因爲ul元素是塊，我把它改成使用JavaScript來顯示flex。響應式導航越來越跳躍顯示柔性

這是小提琴

$(function() { 
 
    var pull  = $('#pull'); 
 
     menu  = $('nav ul.clearfix'); 
 
     menuHeight = menu.height(); 
 
    
 
    $(pull).on('click', function(e) { 
 
     e.preventDefault(); 
 
\t \t $('#burger').toggleClass('open'); 
 
\t \t if ($('#burger').hasClass("open")) { 
 
\t \t \t $(menu).css("display", "flex"); 
 
\t \t \t $("section").css("z-index", 1); 
 
\t \t \t menu.slideToggle(); 
 
\t \t } else { 
 
\t \t \t menu.slideToggle('slow', function() { 
 
\t \t \t $("section").css("z-index", 4); 
 
\t \t \t }); 
 
\t \t } 
 
    }); 
 
}); 
 
$(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; \t 
 
} 
 

 
/*default*/ 
 
@media screen and (max-width: 768px) { \t 
 
header{ 
 
\t height:50px; 
 
\t justify-content:flex-start; 
 
} 
 
nav { 
 
\t z-index:2; 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t right:0; 
 
\t width:100%; 
 
\t height:50px; 
 
\t border-bottom: 0; 
 
\t } 
 
nav a#pull{ 
 
\t line-height:50px;} 
 
nav ul.clearfix { 
 
\t width:100%; 
 
\t display: none; 
 
\t height: auto; 
 
\t background:#ccc; 
 
\t position:relative; 
 
\t flex-direction:column; 
 
\t z-index:2; 
 
} 
 
ul.clearfix a{ 
 
\t border-bottom:1px dotted black; 
 
\t font-size:14px; 
 
\t width:100%; 
 
\t position:relative; 
 
\t height:50px; 
 
\t text-align:center; 
 
\t z-index:2; 
 
} 
 
ul.clearfix a:first-child{ 
 
\t border-top:1px dotted black; \t \t 
 
\t margin-top:50px; 
 
} 
 
nav a#pull { 
 
\t display: flex; 
 
\t position: absolute; 
 
\t align-items:flex-start; 
 
\t justify-content:flex-start; 
 
\t padding-left:10px; 
 
\t right:10px; 
 
\t top:5px; 
 
} 
 
nav a#pull:after { 
 
\t background:#ccc; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t line-height:50px; 
 
\t right:15px; 
 
\t top:0px;} 
 

 
div#burger{ 
 
\t width:20px; 
 
\t height:20px; 
 
\t position: absolute; 
 
\t right:0px; 
 
\t top:0px; 
 
\t -webkit-transform: rotate(0deg); 
 
\t -moz-transform: rotate(0deg); 
 
\t -o-transform: rotate(0deg); 
 
\t transform: rotate(0deg); 
 
\t -webkit-transition: .5s ease-in-out; 
 
\t -moz-transition: .5s ease-in-out; 
 
\t -o-transition: .5s ease-in-out; 
 
\t transition: .5s ease-in-out; 
 
\t cursor: pointer; 
 
\t z-index:4;} 
 
div#burger span{ 
 
\t display: block; 
 
\t position: absolute; 
 
\t height: 5px; 
 
\t width: 100%; 
 
\t background: red; 
 
\t border-radius: 9px; 
 
\t opacity: 1; 
 
\t left: 0; 
 
\t -webkit-transform: rotate(0deg); 
 
\t -moz-transform: rotate(0deg); 
 
\t -o-transform: rotate(0deg); 
 
\t transform: rotate(0deg); 
 
\t -webkit-transition: 0.8s ease-in-out; 
 
\t -moz-transition: 0.8s ease-in-out; 
 
\t -o-transition: 0.8s ease-in-out; 
 
\t transition: 0.8s ease-in-out; 
 
\t } 
 
#burger span:nth-child(1){top: 0px;} 
 
#burger span:nth-child(2){top: 7px;} 
 
#burger span:nth-child(3){top: 14px;} \t 
 

 
#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{ 
 
\t 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{ 
 
\t width:20%;} 
 
\t 
 
} 
 

 
/* 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{ 
 
\t width:100%; 
 
\t height:80px; 
 
} 
 
div#logo { 
 
width: 25%;} 
 
nav { 
 
width: 65%;} 
 
} 
 

 
/*default Landscape*/ 
 
@media screen and (max-width: 773px) and (orientation: landscape) { 
 
div#logo{ 
 
\t width:20%; 
 
} \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <header class="sameThisHeight"> 
 
\t \t <div id="logo" class="logo"> 
 
\t \t \t <img src="assets/Logo.png"> 
 
\t \t </div> 
 
\t \t <nav class="clearfix"> 
 
\t \t <ul class="clearfix"> 
 
\t \t \t <a id="currentPage" href="index.php">HOME</a> 
 
\t \t \t <a href="registration.php">REGISTRATION</a> 
 
\t \t \t <a href="tutorial.php">TUTORIAL</a> 
 
\t \t \t <a href="contact.php">CONTACT US</a> 
 
\t \t </ul> 
 
\t \t <a href="#" id="pull"> 
 
\t \t \t <div id="burger"> 
 
\t \t \t \t <span></span> 
 
\t \t \t \t <span></span> 
 
\t \t \t \t <span></span> 
 
\t \t \t </div> 
 
\t \t </a> 
 
\t \t </nav> 
 
\t </header>

的事情是，

當我試圖點擊漢堡在第一次的來回像它有什麼毛病它。

第二次我打開漢堡，它崩潰的導航，它做得很好，不，不是不好，實際上它不是很好。

不知怎的，序列已經改變了打開導航的「x」按鈕和關閉導航的「漢堡圖標」。它肯定不好。

我不知道我做了什麼這樣的錯誤，正確的事情應該到位是我做了關閉導航和「漢堡圖標」打開的「x」按鈕的相反導航。

我的想法是，因爲我插這在我的JavaScript

$(menu).css("display", "flex");

因爲，我加入到這個我的JavaScript之前它沒有良好的表現，但還不夠好，以配合設計。最後一個項目我做得很好，因爲沒有使用flex，並且使用UL LI標籤進行直接測試。無論如何要解決這個問題，並繼續使用Flex的呢？請幫忙。

來源

2017-01-02 Obink

此行首次單擊時會導致此問題。你應該把display: flex放在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(); 
}

變化（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")) { 
     $("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>

而且你爲什麼要使用類clearfix當你不使用浮動？我從來沒有將clearfix類作爲這種情況下的樣式，而是給它一類navigation或其他東西。

來源

2017-01-02 08:25:17

thx爲你的關注@dejan這是我真正想要的，所以我們不能改變那slideToggle到顯示器的flex？如果我們爲ul標籤添加另一個換行，則會更長一些，而且我認爲您的li標籤沒有必要。 – Obink

還有一件事@dejan，關於ul類的clearfix，這個類名可以改變什麼？我說的是，它只是一個類名和類內的屬性，它本身就是我們真正想要的類型不是？或者一個「clearfix類」有一個獨立的屬性，我不知道。 – Obink

@Obink否，'slideToggle（）'將元素設置爲'display：block;'，目前沒有辦法改變它。 –

響應式導航越來越跳躍顯示柔性

回答

相關問題