モバイルNavBarの問題

私の最初のプロジェクトで私を助けてくれている皆様、ありがとうございます。モバイルNavBarの問題

私はモバイルメニューは、「バーガー」ボタンは左と小型にもこだわっているアクティブなとき、この応答ナビゲーションバー

1.Howeverを作るために管理しています。

私はサブメニューを作ろうとしましたが、成功しませんでした。

3.私はナビゲーションメニューと同じ行で好きなロゴを持っていますが、メディアがモバイルデバイス（480px）上にあるときは、上と中央にロゴを付けようとしています下の行にナビゲートします。

どのようなヘルプも素晴らしいでしょう。前もって感謝します。

これは私のjsfiddle https://jsfiddle.net/jkfb4Lus/

<body> 

<div id="container"> 

    <header id="header"> 
     <ul class="topnav" id="myTopnav"> 
      <li><a href="#Home">Home</a></li> 
      <li><a href="#About">About</a></li> 
      <li><a href="#Writings">Writings</a></li> 
      <li><a href="#Extra">Extra</a></li> 
      <li><a href="#Contact Us">Contact Us</a></li> 
      <li class="icon"><a id="button" href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
     </ul> 
    </header> 

<script> 
     function myFunction() { 
      var x = document.getElementById("myTopnav"); 
      if (x.className === "topnav") { 
       x.className += " responsive"; 
      } else { 
       x.className = "topnav"; 
      } 
     } 
</script> 


</div> 
</body> 


body{ 
    margin:0; 
    padding:0; 
} 

    *{ 
    margin:0; 
    padding:0; 
    } 

#header{ 
    width:100%; 
    height:65px; 
    background-color:white; 
} 

/*remove margins and padding from the LIST, and add a black background color*/ 
ul.topnav{ 
    width:100%; 
    height:65px; 
    float:right; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    background-color:#333; 
    text-align:right; 
} 

/*float the LIST (li) items side by side*/ 
ul.topnav li{ 
    display:inline; 

} 

/*float the LIST (li) items side by side HOVER*/ 
ul.topnav li:hover{ 
    border-bottom:; 
} 


/*style the (a)links inside the LI items*/ 
ul.topnav li a{ 
    position:relative; 
    display:inline-block; /* so it accepts top/bottom padding */ 
    text-decoration:none; 
    padding:px; 
    color:#FFF; 
    font-weight:500; 
    width:75px; 
    text-align:center; 
    line-height:65px; 
    width:100px; 
} 


/*change backround color of the LINKS (a) on hover*/ 
ul.topnav li a:hover{ 
    background-color:#F1CBFF; 
    color:purple; 
    transition:background-color 1.0s ease; 
} 


/*hide the list (li) items that contains the link that 
should open and close-quotethe topnav on small screens*/ 
ul.topnav li.icon{ 
    display:none; 
} 


/*when the screen is less than 680px hide,hide all list (li)items, 
except the first one("Home"). Show the list(li) item that contains 
the link (a) open and close the topnav (li.icon)*/ 


@media screen and (max-width:680px){ 

#header{ 
    height:auto; 
} 

/*remove margins and padding from the LIST, and add a black background color*/ 
ul.topnav{ 
    height:auto; 
} 

ul.topnav li:not(:first-child){ 
     display:none; 
     } 

ul.topnav li.icon{ 
     float:right; 
     display:inline-block; 
} 

/*float the LIST (li) items side by side*/ 
ul.topnav li{ 
    float:left; 
} 
    } 

/*the "responsive" class is added to the topnav with Javascript when the uses 
clicks on the (icon). This class makes the topnav look good on small screens*/ 
@media screen and (max-width:680px){ 
    ul.topnav.responsive { 
     position:relative; 
    } 

ul.topnav.responsive li.icon{ 
    position:absolute; 
    right:0; 
    top:0; 

} 

ul.topnav.responsive li { 
    float:none; 
    display:inline; 

} 

ul.topnav.responsive li a{ 
    width:100%; 
    display:block; 
    text-align:center; 
    padding:10px; 
} 

ul.topnav li a:hover{ 
border-bottom:1px purple solid; 
    transition:all 1.0s ease; 
} 

}

出典

2016-12-08 user2916941

へのリンクは、あなたがフレキシボックスを使用してみましたでしょうか？

ul.topnav.responsive li.icon{ 
    display: flex; 
    align-items: center; 
}

出典

2016-12-08 22:20:44 RBdevelop

フレックスボックスは素晴らしいですが、互換性の欠点http://caniuse.com/#feat=flexbox –

答えて

関連する問題