切换侧边栏以部分隐藏边栏

Question

我正在尝试重新创建我在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>