如何折叠左侧面板？

问题描述：

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

将不胜感激！

答

您可以使用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类，使其隐藏。

答

您可能想要做的第一件事就是使用像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，只需更改图标，或在徽标右侧添加左箭头图标即可。某处可以看到，但不在路上！

如何折叠左侧面板？

相关推荐