将侧边栏切换为部分隐藏侧边栏

Question

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

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

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

Answer 1

一般的想法是，您知道菜单中 icon/image 的宽度，并将菜单的宽度设置为该宽度，然后隐藏溢出（菜单项中的文本）。然后，当您将鼠标悬停在菜单上时，调整菜单的宽度，以便可以看到菜单文本。

*{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>

Answer 2

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

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

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

将侧边栏切换为部分隐藏侧边栏

Toggle sidebar to partially hid sidebar

css

sass

frontend

navbar

web-frontend