モバイルスライドの左メニューをスタイリングするいくつかの問題

Question

応答性の高いスライドの左メニューを使っていますが、レイアウトに問題があります。モバイルメニューアイコンをクリックするとモバイルメニューが黄色のdivのすぐ下に表示されます。Imは余白を使用しています。トップ：70px、他のブラウザでは、この方法ではメニューはyelow divのすぐ下に表示されません。

モバイルアイコンをクリックすると、アイコンフォントクラスを「fa-fa-bars」から「fa-fa-close」に変更したいと考えています。しかし、それは動作しません。

そして、「アイテムモバイルリンク」は、他のヘッダー要素の中央に並べて表示されません。

例：https://jsfiddle.net/4ggsmqje/1/この例では、例えば

：私はしたいけどとしてレイアウトが表示されますhttps://jsfiddle.net/4ggsmqje/4/と「マージントップ：80px;」 .Mobile__nav divにあり、 "margin-top：15px;" 「アイテムモバイル」リンクに表示されます。しかし、このアプローチでは、他のブラウザでは異なるように見えます。モバイルスライドの左メニューは、黄色のdivのすぐ下に表示されますが、上または下には表示されません。

HTML：

<div class="Header" style="background:yellow;"> 
    <div class="container"> 
     <div class="row align-items-center justify-content-between"> 
      <div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none"> 
      <div class="Header__mobile__menu"> 
       <a id="mobile" href=""><i class="fa fa-bars" aria-hidden="true"></i></a> 
      </div> 
      </div> 
      <div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none"> 
      <div class="Header__logo"> 
       <a href="">Logo</a> 
      </div> 
      </div> 
      <div class="col-4 col-4 co-sm-4 d-md-none d-lg-none d-xl-none"> 
      <ul> 
       <li><a href>Item Mobile</a></li> 
      </ul> 
      </div> 
      <div class="d-none d-md-block d-lg-block d-xl-block col-md-4"> 
       <div class="Header__logo"> 
        <a href="">Logo</a> 
       </div> 
      </div> 
      <ul class="Mobile__nav"> 
       <li><a href="">Item 1</a></li> 
       <li><a href="">Item 2</a></li> 
       <li><a href="">Item 3</a></li> 
       <li><a href="">Item 4</a></li> 
       <li><a href="">Item 5 <i class="fa fa-caret-down" aria-hidden="true"></i></a></li> 
      </ul> 
      <div class="col-8 col-sm-8 d-none d-md-block"> 
       <ul class="Header__nav"> 
        <li><a href="">Item 1</a></li> 
        <li><a href="">Item 2</a></li> 
        <li><a href="">Item 3</a></li> 
        <li><a href="">Item 4</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS：

.Header{ 
    padding: 15px 0; 
    border-bottom: 1px solid orange; 
} 

.Mobile__nav{ 
    margin-top:70px; 

    position: fixed; 
    left: 0; 
    top: 0; 
    width: 76%; 
    height: 100%; 
    min-width: 200px; 
    max-width: 340px; 
    background-color: gray; 
    z-index: 1000; 
    overflow: hidden; 
    overflow-y: auto; 

    li{ 
    display: block; 
    width: 100%; 
    padding: 20px; 
    } 

    li a{ 
    color: orange; 

    } 
} 

.Header__logo{ 
    h1{ 
    color: orange; 
    } 
} 

.Header__mobile__menu{ 
    cursor: pointer; 
    float: left; 
    a{ 
    color: orange; 
    } 
} 

jqueryの：それはul要素内にラップされているので

$('#mobile').click(function() { 
    $("i", this).toggleClass("fa-fa-bars fa-fa-close"); 
}); 

Answer 1

"アイテムモバイル" テキストが垂直に整列されておらず、 ul要素には、アライメントをねじ込むマージンがあります。プロジェクトにはcss resetを使用することができます（またはベストプラクティスとして推奨する必要があります）。あなたがそれをしたくない場合（何らかの理由で）、ulマージンを削除するルールを書いてください。つまり、ul{ margin:0; }

また、 "Mobile__nav"要素の位置についてはマージンを使用しないでください代わりに固定位置要素であるため、配置する必要があります。代わりに、topプロパティを使用して要素を揃える必要があります。

ブラウザによっては、（マージンのような）別のルールで予期せず動作するものがあるため、常にベストプラクティスに固執するようにしてください。これは、CSSのリセットを使用して、ブラウザのすべての既定のデフォルト値を同じにする別の理由です。

this例をご覧ください。