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

【问题标题】：Toggle sidebar to partially hid sidebar切换侧边栏以部分隐藏侧边栏
【发布时间】：2017-02-15 23:39:06
【问题描述】：

我正在尝试重新创建我在zurb.com 上遇到的这个侧导航栏。简而言之，它是一个带有图像和文本元素的导航栏。当您在导航栏外单击时，它会自行折叠以隐藏文本，只留下图像。

目前尚不清楚如何部分隐藏单个“li”元素的各个方面。我最初的猜测是他们在“li”元素中创建了类并在点击时隐藏其中一个类，但基于看起来并非如此的代码。

任何见解都会非常有帮助。即使是像这样的导航栏的公认名称也有助于为我指明解决方案。谢谢！

【问题讨论】：

标签： css sass frontend navbar web-frontend

【解决方案1】：

我对你发布的内容做了一个干净的版本。

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

基本上他们已经定义了一个开放宽度 - 这并不理想，但width:auto 不适用于过渡，宽度在第 23 行，并且会因您选择的项目而异。

【讨论】：

这似乎成功了。谢谢你的解释！

【解决方案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>

【讨论】：

如果我的答案是错误的，我希望有人能解释一下反对意见，这样我就可以从我的错误中吸取教训。据我所知，这与 OP 所链接的基本技术相同。