Question

我正在尝试构建一个侧边栏导航，就像在Wordpress管理仪表板中使用的那样。我喜欢折叠侧边栏但仍然可以看到图标的选项。我使用Zurb Foundation和jQuery。我终于找到了一个我认为可行的解决方案，但它做了一些有趣的事情。 <li>的宽度都不同，直到我第一次折叠并重新打开菜单。然后他们都保持相同的大小。所以这是我的问题：

如何在第一次加载时使li的大小相同？
如何在侧边栏打开时调整主要内容的大小并进行翻转（而不是按下，这是当前正在发生的事情）？
我希望侧边栏在第一页加载时显示为打开（带有图标和标题），但如果用户将其切换为关闭（仅显示图标视图），则应在导航网站时保持关闭状态。我该怎么做？

Here's a jsFiddle with my code.

Answer 1

这里有一个教程可以做到这一点，就像一个魅力，你只需要适应基金会tutorial

在您的特定情况下，由于您希望始终显示图标，只需打开components.css并替换

.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}

与

.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}

基础可切换侧边栏与图标像Wordpress仪表板

1 个答案: