相信大家都会看到，facebook手机app。也在许多平面 UI 模式的网站中。
我想做一个这样的左菜单。
这就是我现在所做的。
- 最初隐藏菜单 (
display:none) - 单击菜单按钮。显示左侧菜单 ( )，并使用 javascript ( )
toogle增加主要内容的左边距style,maregin-left:100px;
这工作正常，但我只想知道，这是最佳实践吗？这会响应吗？
问问题
537 次
3 回答
2
这种设计模式被称为“画布外”布局。
根据内容的性质，您可能不希望将其隐藏在更大的屏幕上，这取决于您的要求。
我的意思有一个很好的例子：http: //jasonweaver.name/lab/offcanvas/
导航在全屏上可见并在较小的移动视口上隐藏。
于 2013-07-21T07:38:35.390 回答
1
你所做的很好，但为了获得最佳实践，我将使用 css3 转换来翻译类似这样的东西
.menu{ -webkit-transform:translateX(-200px)
从那里你可以使用来自 jquery 的 toggleClass("active")
.menu.active{-webkit-transfrom:translateX(0)}
希望这有帮助！
于 2013-07-21T09:05:20.990 回答
0
是的，这是一个非常好的方法，它应该响应响应，因为它只占用 100px 的宽度。如果它是一个全屏水平下拉菜单，那么你必须确保它的内容是响应式的，但是一个 100px 宽的垂直菜单在任何分辨率下都可以（特别是如果用户可以选择打开它或关闭）。
于 2013-07-21T07:31:09.953 回答