首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载

3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载

作者头像
用户5997198
发布2019-08-12 17:14:35
8780
发布2019-08-12 17:14:35
举报
文章被收录于专栏:蚂蚁开源社区蚂蚁开源社区

这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计。这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,Material Design风格效果和展开式效果。

使用方法

HTML结构

这三种不同的隐藏菜单的HTML结构大致基本相同。第一种滑动效果菜单的HTML结构如下:

<div class="screen"> <div class="navbar"></div> <div class="list"> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> </div> <div class="burger"> <div class="x"></div> <div class="y"></div> <div class="z"></div> </div> </div> </div>

CSS样式

第一种隐藏菜单的滑动效果的CSS实现代码非常简单。整个菜单设置了固定的宽度和高度,并设置指定贝兹曲线的动画过渡效果。

div.menu { height: 568px; width: 320px; margin-left:-190px; opacity:0; position:relative; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

在菜单按钮被点击的时候,背景图片会轻微的移动一些,制作出一点视觉差效果。

#menu-bg{ position: absolute; left: -10px; top: -120px; opacity: 0.3; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

div.menu.animate #menu-bg{ left:-23px; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

菜单项使用margin-left值来制作动画效果,每一个菜单项都设置了不同的延迟时间,使它们有依次进入的效果。

div.menu ul{margin-top:110px;position:relative;} div.menu ul li { list-style: none; width: 320px; margin-top: 40px; text-align: left; padding-left: 100px; font-size: 23px; } div.menu ul li a { color:#fff; text-decoration:none; letter-spacing:1px; } div.menu.animate ul li { margin-left:80px; -webkit-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.menu.animate li:nth-of-type(1){transition-delay: 0.0s;} div.menu.animate li:nth-of-type(2){transition-delay: 0.06s;} div.menu.animate li:nth-of-type(3){transition-delay: 0.12s;} div.menu.animate li:nth-of-type(4){transition-delay: 0.18s;} div.menu.animate li:nth-of-type(5){transition-delay: 0.24s;}

另外在菜单按钮被点击的时候,屏幕层screen被推到屏幕的右边,这个效果通过修改它的left属性来完成。

div.screen{ width:320px; height:560px; overflow:hidden; position:absolute; top:0px; left:0px; background:#31558a; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.screen.animate{ left:254px; -webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000); }

源码演示/下载请点击阅读原文

↓↓↓↓↓↓

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-11-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档