ナビゲーションバーのドロップダウン矢印をインラインに移動

Question

私はビルド中のR光沢のあるアプリケーションにナビバーを持っており、メニューの代わりにドロップダウン矢印をインラインに移動する必要があります。

ナビゲーションバーのトグルとは何かですか？

Answer 1

通常、私はあなたの現在のコードでそれを行う方法を示すだろうが、そこではありませんので、任意のは、私はあなたのために一緒に例を置きます。

私は絶対配置を使用して、:after要素を親クラスであるnav-itemの内側に配置します。親クラスには、絶対配置された子を親の内部に保持するための相対的な配置が必要であることに注意してください。

私はtop:50%;を使用して親コンテナの中央にアイコンを表示しますが、それは常に低すぎますので、transform:translateY(-50%)を追加します。それはそれを死の中心にするためにそれ自身の高さのアイコンの50％をプルアップします。

私はこれは参考になりました願っています:)

.navbar{ 
 
    display:flex; 
 
    justify-content:flex-start; 
 
    align-items:center; 
 
} 
 

 
.nav-item{ 
 
    flex:1 1 20%; 
 
    position:relative; 
 
    background-color:black; 
 
    padding:1em; 
 
    color:white; 
 
} 
 

 
.nav-item:after{ 
 
    content:'>'; 
 
    font-size:14px; 
 
    position:absolute; 
 
    top:50%; 
 
    right:1em; 
 
    transform:translateY(-50%); 
 
}

<div class="navbar"> 
 
    <div class="nav-item"> 
 
    Item 1 
 
    </div><!-- nav-item --> 
 
    <div class="nav-item"> 
 
    Item 2 
 
    </div><!-- nav-item --> 
 
    <div class="nav-item"> 
 
    Item 3 
 
    </div><!-- nav-item --> 
 
     <div class="nav-item"> 
 
    Item 4 
 
    </div><!-- nav-item --> 
 
</div><!--navbar -->