0
私は以前のプロジェクトをリマスタリングしてフレックスに変更しようとしました。 ul要素のために乱れてしまい、JavaScriptを使ってディスプレイフレックスに変更しました。応答的なナビゲーションがディスプレイで跳ね返る
これは事は、私はそれはと間違って何かを持っているようにそれを前後だ最初の時間でハンバーガーをクリックしてみました
あるフィドル
$(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>ですそれ。
2回目にバーガーを開けば、ナビが崩壊してしまいました。いいえ、実際には良くないです。
どういうわけか、シーケンスがnavを開くための「x」ボタンとnavを閉じる「burger icon」を変更しました。それは間違いなくOKです。
私はそれについて間違っていたか分かりません。適切なものは、私がナビゲーションを閉じるための "x"ボタンと、開くための "burger icon"の逆でした。ナビ。
私の思考私は私のjavascriptにこれを追加する前に、それはデザインと一致するのに十分な良い良いパフォーマンスをしたではなく、ので、私は私のJavaScriptの
$(menu).css("display", "flex");
でこれを挿入するためでした。フレックスを使用していないためにうまくやった最後のプロジェクトで、UL LIタグではっきりとしています。とにかくこの問題を解決し、フレックスを使用していますか？助けてください。
あなたの懸念事項@dejanそれは私が本当に欲しかったので、私たちはそのflexをdisplay flexに変更できませんか？私たちがulタグのために別のラップを入れれば、もう少し長くなります。あなたのliタグは必要ないと思います。 – Obink
ともう1つ@dejan、ul class clearfixについて、このクラス名は何か変わる可能性がありますか？私が言っているのは、それはちょうどクラス名とそれ自身のクラスの中のプロパティで、私たちは本当にタイプしたくないのですか？または "clearfixクラス"は私が知っていることなく独立したプロパティを持っています。 – Obink
@Obinkいいえ、 'slideToggle（）'は要素を 'display：block;'に設定します。この時点でそれを変更する方法はありません。 –