Question

我正在寻找一种让左侧面板崩溃的方法。我不想在地图/网站上有任何其他东西来移动或调整。只是让左侧面板可折叠。理想情况下使用滑动动画而不是弹出和弹出。 Here's a link to my website with the panel in question

非常感谢！

Answer 1

您可以使用transition属性上的CSS left执行此操作，以便对此值进行平滑动画更改。然后添加和删除更改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类以使其隐藏。

Answer 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，只需更改图标，或在徽标右侧添加左箭头图标即可。某处可见，但不在路上！

如何折叠左侧面板？

2 个答案: