左侧切换菜单，就像在facebook中一样

Question

我相信每个人都会看到，facebook移动应用程序。还有许多平面UI模式网站。

我想制作一个这样的左菜单。

这就是我现在所做的。

1. 最初隐藏菜单（display:none）
2. 点击菜单按钮。显示左侧菜单（toogle），并使用javascript（style,maregin-left:100px;）
增加主要内容的左边距

这很好，但我只是想知道，这是最好的做法，这会有所回应吗？

Answer 1

设计模式称为“非画布”布局。

根据内容的性质，您可能不希望将其隐藏在较大的屏幕上，具体取决于您的要求。

我的意思是一个很好的例子：http://jasonweaver.name/lab/offcanvas/

导航在全屏显示并隐藏在较小的移动视口中。

Answer 2

你做的是好的但是为了最好的练习我将使用css3转换翻译这样的东西

.menu{ -webkit-transform:translateX(-200px)

从那里你可以使用jquery

中的toggleClass（“active”）

.menu.active{-webkit-transfrom:translateX(0)}

希望这有帮助！

Answer 3

是的，这是一个非常精细的方法，它应该响应，因为它只占用100px的宽度。如果它是一个全屏水平下拉菜单，那么你必须确保其内容是响应性的，但是几乎任何分辨率都可以使用100px宽的垂直菜单（特别是如果用户可以选择将其切换为打开或关闭）。