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

Question

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

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

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

Answer 1

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

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

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