如何实现可折叠导航栏？

Question

我对客户端开发的世界相对较新，可能正在使用＆＃34; collapsible＆＃34;标题错误，但这是我想在我的网络应用程序中实现的目标：

所以，为了不同的目的，我在标题中有几个条形图，我想让用户将它们折叠成一个小小的V形，并且只有在真正需要它们时才展开它们。

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

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

Answer 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元素：

nav.hide {
    left: -15em;
}

样本本身很简陋，但希望它可以让你了解如何处理这样的问题。