响应式菜单类似于Google Plus iOS应用

Question

在网站响应式重新设计的过程中。对于移动智能手机视图，我希望复制最新Google Plus iOS应用中显示的菜单。它基本上由顶部带有3个图标的条形图组成。如果您选中左侧图标，则左侧菜单会滑出。如果您点按中间图标，则全屏菜单会下拉，让您选择各种选项。如果点击右侧图标，则右侧菜单会滑出。此外，您可以通过屏幕上的滑动动作从侧面拉出左右菜单。

这是应用程序的正常外观，显示顶部的菜单栏（某些细节模糊不清）。

这是拉出的左侧菜单。

这是中间的全屏菜单下拉菜单。

这是从右侧拉出的正确菜单。

复制此类菜单设计的最佳方法是什么？这将是一个响应式设计，所以很明显，当在桌面上查看时，它将具有不同的外观和行为。

Answer 1

我建议您检查sidr，这是一个仅针对此特定任务的jquery插件

用于创建左右菜单的代码就是这样的

<a id="left-menu" href="#left-menu">Left Menu</a> 
<a id="right-menu" href="#right-menu">Right Menu</a>

<script>
$(document).ready(function() {
    $('#left-menu').sidr({
      name: 'sidr-left',
      side: 'left' // By default
    });
    $('#right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>

您可以找到一些示例用法here