Facebook Mobile Slide Menu in HTML5 + CSS3

The goals of this small project are:

  • Minimal javascript
  • Rely on CSS for animations
  • Behave as much like the iOS implementation as possible
  • Do not scroll main content area when menu is visible
  • Use new iOS overflow: scroll / -webkit-overflow-scrolling: touch if possible (buggy)

Notes

The HTML and CSS are a work in progress and in no way production ready.

I have inlined most of the images using data-uri's so that I could work on this offline. All images/icons used belong to Facebook and I am simply using them for educational purposes.

Demo

You can watch a quick Youtube video I put together of how this works in the iOS simulator.

http://www.youtube.com/watch?v=uCFY0DF2UZo (a little outdated)

You may also load this URL directly on your iPod/iPhone device or the iOS Simulator:

http://getintothis.com/fb-menu/

Recent Changes

  • Enhanced swipe open and close
  • re-enabled overflow-scrolling (native scroll) in menu

License

tldr; Do whatever you want with this.


Copyright (c) 2013, Ramin Bozorgzadeh All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

  • Neither the name of Thomas J Bradley nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.



Facebook Mobile Slide Menu in HTML5 + CSS3

这个小项目的目标是:

  • 最小JavaScript
  • 依靠CSS进行动画
  • 尽可能多地像iOS实现
  • 当菜单可见时,不要滚动主内容区域
  • 使用新的iOS溢出:scroll / -webkit-overflow-scrolling:如果可能,触摸(buggy)

注意

HTML和CSS是一项正在进行中的工作,也没有生产就绪。

我已经使用数据uri来大部分图片,所以我可以离线工作。 所有使用的图像/图标属于Facebook,我只是将其用于教育目的。

演示

您可以观看一个快速的YouTube视频,我将其在iOS模拟器中的运作方式放在一起。

http://www.youtube.com/watch?v=uCFY0DF2UZo (有点过时)< / p>

您也可以直接在 iPod / iPhone 设备或 iOS模拟器上加载此网址:

http://getintothis.com/fb-menu/

最近更改

  • 增强滑动打开和关闭
  • 在菜单
  • 中重新启用溢出滚动(本机滚动)

许可证

tldr用这个做任何你想要的。


版权所有(c)2013,Ramin Bozorgzadeh 保留所有权利。

以源和二进制形式重新分发和使用,无论是否修改, 只要符合以下条件:

  • 源代码的再分发必须保留上述版权声明, 这个条件列表和以下免责声明。

  • 二进制再分发必须复制上述版权声明, 该条件列表和以下免责声明在文档中 和/或提供分发的其他材料。

  • 托马斯·布拉德利(Thomas J Bradley)的名字和其贡献者的名字也不可能 用于批准或推广不含此软件的产品 具体事先书面许可。

本软件由版权所有者和贡献者按原样提供, 任何明示或暗示的保证,包括但不限于暗示 有关适销性和适用于特定用途的保证 免责声明在任何情况下,版权所有者或贡献者均不承担责任 任何直接,间接,偶然,特殊,惩戒性或后果性的损害 (包括但不限于采购替代商品或服务; 使用,数据或利润损失;或业务中断) 任何责任理论,无论合同,严格责任或侵权 (包括疏忽或以其他方式)以任何方式使用本手册 软件,即使已被告知可能发生此类损害。




相关问题推荐