サイドバーを部分的に隠すためにサイドバーを切り替える

Question

私はzurb.comに出くわしたサイドナビを作り直そうとしています。一言で言えば、画像とテキスト要素を持つnavbarです。ナビゲーションバーの外側をクリックすると、テキストが隠れるように折りたたまれ、画像だけが表示されます。

1つの「li」要素の側面を部分的に隠す方法は明確ではありません。 "li"要素内でクラスを作成し、クリック時にクラスの1つを非表示にしますが、そのようには見えないコードに基づいていました。

洞察力は本当に役に立ちます。このようなナビゲーションバーの認識された名前でさえ、私を解決策に向けるのに役立ちます。ありがとう！

Answer 1

私はあなたが投稿何のクリーンバージョンを作りました。理想的ではありませんが、width:auto遷移と、幅がライン23上では動作しません、あなたがアイテムとして何を選ぶかによって異なります -

http://codepen.io/OfficialAntarctica/pen/MJxMKd

は基本的に、彼らはオープン幅を定義しています。

Answer 2

一般的な考え方は、メニュー内のアイコン/画像の幅を知っていて、メニューの幅をその幅に設定し、オーバーフロー（メニュー項目のテキスト）を隠すことです。次に、メニューの上にマウスカーソルを移動すると、メニューのテキストが表示されるようにメニューの幅が変わります。

*{margin:0;padding:0} 
 
nav { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 45px; 
 
    transition: width .5s; 
 
    background: #eee; 
 
} 
 
nav:hover, li { 
 
    width: 175px; 
 
} 
 
img { 
 
    width: 45px; 
 
    float: left; 
 
} 
 
li { 
 
    clear: both; 
 
    list-style: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><img src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> blah blah blah</li> 
 
    <li><img src="https://pbs.twimg.com/profile_images/796243884636512260/zHVoWqKV.jpg"> blah blah blah</li> 
 
    </ul> 
 
</nav>