• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

callmenick/Material-Menu: Off canvas menu inspired by Google's material desi ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

callmenick/Material-Menu

开源软件地址(OpenSource Url):

https://github.com/callmenick/Material-Menu

开源编程语言(OpenSource Language):

CSS 80.3%

开源软件介绍(OpenSource Introduction):

Material Design Off Canvas Menu

This project was build using front end technologies, HTML5, CSS3, and JavaScript, to generate an off-canvas menu based on material design principles. It contains four main features:

  1. Animated toggle button
  2. Animated off canvas menu
  3. Animated Menu Items
  4. Touch/click ripple effect

View the live demo here

1 - Animated Toggle Button

The animated toggle button is a neat button created with pure CSS. It's a hamburger icon by default, and animates into an arrow (indicating a close button) when the menu is active/open.

2 - Animated Off Canvas Menu

The menu is initially hidden from view, and when the toggle switch is hit, it animates into view. It bumps the main content to the side, and also adds a mask over it. Clicking the mask or the toggle switch again closes the menu, animating it out of view.

3 - Animated Menu Items

While the menu slides into view, each item in the menu animates into view with a slight delay. This adds a little layer of neat animation to the menu.

4 - Touch/Click Ripple Effect

The touch/click ripple effect is an effect that creates a little animation, mimicking a ripple, expanding outwards from the point of contact with the user. This effect is mentioned and displayed quite a bit in the material design spec, and I replicated it with CSS and JavaScript.

Support

This project makes use of a few modern techniques:

  • Transitions, transforms, and animations
  • Transition events
  • The classList JavaScript method to add, remove, and check classes.

If you want full browser support, you're going to have to implement the necessary fallbacks and polyfills.

Tests

This project was tested in the following browsers:

  • Chrome 39
  • Safari 8
  • Firefox 34

Anyone else willing to run tests in other browsers, please let me know the results! Any issues, please file them accordingly.

License

Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php

Copyright 2014, Call Me Nick

http://callmenick.com

Live Demo

View the live demo here.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap