如何实现可折叠导航栏？答案

【问题标题】：How to implement collapsible navigation bars?如何实现可折叠导航栏？
【发布时间】：2014-07-14 18:55:04
【问题描述】：

我对客户端开发领域相对较新，可能在标题中错误地使用了“可折叠”一词，但这是我希望在我的 Web 应用程序中实现的目标：

所以，我在标题中有几个用于不同目的的条，我希望允许用户将它们折叠成一个小人字形，只有在他们真正需要它们时才将它们展开。

所以，我正在寻找可以帮助我的框架或示例代码。

我正在使用 Bootstrap 进行我的 Web 应用程序的主要设计和布局，如果它们兼容，我会是最好的，但我可以自己处理它。我只是不想在这里从头开始实现所有东西......

【问题讨论】：

您可以放置一个字形图标，然后单击将您的导航栏附加到标题？使用 CSS，我相信您可以创建淡入/淡出效果。
@JordanD：我可以将现有栏的可见性设置为display:none 并返回以模仿它并使用一些淡入淡出效果来显示它，这对我来说似乎更容易。我只是没有太多时间从头开始实现所有内容:)

标签： javascript html css twitter-bootstrap navigation

【解决方案1】：

您可以使用一些简单的 CSS 来实现该效果。看看这个jsfiddle。

您的包装容器中有两个元素，如下所示：

<div class="wrapper">
    <nav>
        My nav
    </nav>
    <section>
        This is my content
    </section>
</div>

然后使用 css 将 nav 元素置于 section 元素之上

section {
    width: 100%;
    height: 100%;
    background-color: gray;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 10em;
    text-align: center;
    box-sizing: border-box;
}

nav {
    z-index: 100;
    position: absolute;
    background-color: green;
    display: block;
    top: 0;
    left: 0;
    width: 50%;
    transition: all 500ms ease;
}

要创建隐藏导航菜单的效果，您可以添加一些 jquery：

$('nav').click(function () {
    $(this).toggleClass('hide');
});

最后只需添加另一种样式来处理隐藏的导航元素：

nav.hide {
    left: -15em;
}

示例本身是简单的，但希望它可以让您了解如何解决此类问题。

【讨论】：

哦，非常有趣的建议！谢谢，我会调查的。