如何折叠左侧面板？答案

【问题标题】：How to collapse left side panel?如何折叠左侧面板？
【发布时间】：2017-02-01 18:32:47
【问题描述】：

我正在寻找一种方法来让这个左侧面板折叠起来。我不想在地图/站点上移动或调整任何其他内容。只是为了让左侧面板可折叠。理想情况下使用滑动动画而不是弹出进出。 Here's a link to my website with the panel in question

将不胜感激！

【问题讨论】：

标签： javascript jquery html css panel

【解决方案1】：

您可以在 left 属性上使用 CSS transition 来实现此值的平滑更改动画。然后添加和删除一个更改left 值的类以切换侧边栏的可见性。

.left-side-bar {
    transition: left .8s ease-in;
}

.left-side-bar.is-out {
    left: -16.666%; /* equal to the sidebar's width */
}

默认情况下它是可见的。使用 JavaScript 添加/删除 is-out 类以使其隐藏。

【讨论】：

【解决方案2】：

您可能想要做的第一件事是使用像 Font Awesome 这样的 api 来获得一些很酷的图标。您可以通过以下cdn使用jQuery添加它。

$('head').append('<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">');

然后创建 div、css 来保存使用 BS hidden-lg、hidden-md、hidden-sm 显示的汉堡包。将其隐藏在比手机更大的任何东西上。这看起来像这样。

<div class="mobile_bars hidden-lg hidden-md hidden-sm">
<button id="hide_menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>

您可以通过 jQuery 添加它，或者直接添加到您的 html 中。

将以下 CSS 添加到您的网站 CSS 以容纳此元素。

<style>
.mobile_bars {
    margin-left: 262px;
    margin-top: -32px;
}

/* 注意* 你不需要像这样写 CSS，感觉你会用 jquery 添加

.left-side-bar.is-out */

.push-in {
left: -16.666%; /* equal to the sidebar's width */
}

</style>

然后使用@keithjgrant 代码编写您的脚本。

<script>
// Include Ready function
ALL is .TOUCH deprecated?? 
$('button#hide_menu').on( function(){

$('.left-side-bar').toggle('push-in animated fadeOutLeft');

// For some fun add animated.css to your header and add the following classes as well,

或访问https://daneden.github.io/animate.css/选择课程！

});

<script>

这不会是我的最终结果，但它会让你接近。此外，我假设您希望将此作为移动网站的解决方案，但是如果您希望使用此桌面选项 ID，只需更改图标，或在徽标右侧添加左箭头图标。某处可见但不碍事！

【讨论】：