html - 左切换菜单,就像在 facebook 中一样

标签 html css responsive-design

相信大家都看过了,facebook手机app。也出现在许多扁平化 UI 模式的网站中。

我想做一个这样的左菜单。

这就是我现在所做的。

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

这工作正常,但我只是想知道,这是最佳做法吗,这是否会响应?

最佳答案

设计模式被称为“ Canvas 外”布局。

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

这里有一个很好的例子:http://jasonweaver.name/lab/offcanvas/

导航在全屏上可见,在较小的移动视口(viewport)上隐藏。

关于html - 左切换菜单,就像在 facebook 中一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17770033/

相关文章:

html - 对齐元素,对齐 self 不适用于 IE11

html - 小屏幕 Bootstrap 中的内容重叠

html - preventDefault 和 stopPropagation 不允许更改 div 的 css 属性

html - 网站元素和字体在移动设备上太小

javascript - AngularJS,如何在 HTML 的外部 JS <script> 中使用变量?

javascript - 有没有办法让两个 HTML ID 链接到一个 JavaScript 函数?

javascript - Bing 翻译小部件没有原始文本弹出并自动显示翻译按钮文本

javascript - 使并排图像在移动设备上移动为垂直图像

html - 在响应式布局中每隔第 n 行偏移一次

html - Microsoft.com 上的下拉箭头