Question

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

目前尚不清楚如何部分隐藏单个＆＃34; li＆＃34;元件。我原来猜测他们在一个＆＃34; li＆＃34;元素和隐藏其中一个类点击，但基于看起来不是这样的代码。

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

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>

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

2 个答案: