Переключить боковую панель на частично скрытую боковую панель

Question

Я пытаюсь воссоздать эту сторону navbar Я наткнулся на zurb.com. Вкратце, это навигационная панель с изображением и текстовыми элементами. Когда вы нажимаете вне навигационной панели, он сворачивается сам по себе, чтобы скрыть текст, оставив только изображение все еще в поле зрения.

Непонятно, как вы можете частично скрыть аспекты одного элемента «li». Мое первоначальное предположение, что они создали классы в элементе «li» и скрыть один из классов при щелчке, но на основе кода, который не выглядит так.

Любое понимание было бы действительно полезно. Даже распознанное имя такого навигатора было бы полезно указать мне на решение. Благодаря!

Answer 1

Я сделал чистую версию того, что вы вывесили.

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

В основном они определили открытую ширину - которая не является идеальным, но width:auto не работает с переходами, ширина по линии 23 и будет меняться для того, что вы выбираете в качестве элементов.

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>