html div初始隐藏点击可见_3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载...

49e941bac18d7ce43044248a8ca9ed92.gif

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

b458139161ce8e3503f0121d704a3350.png

使用方法

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);}

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

↓↓↓↓↓↓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/258304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《数据结构与抽象:Java语言描述(原书第4版)》一P.4.1 标识类

本节书摘来华章计算机《数据结构与抽象&#xff1a;Java语言描述&#xff08;原书第4版&#xff09;》一书中的第1章 &#xff0c;&#xff3b;美&#xff3d;弗兰克M.卡拉诺&#xff08;Frank M. Carrano&#xff09; 蒂莫西M.亨利&#xff08;Timothy M. Henry&#xff09; …

【SVM】简单介绍(一)

1、结构风险最小化 我们想要在未知的数据上得到低的错误率&#xff0c;这叫做structural risk minimization;相对的&#xff0c;训练误差叫做empirical risk minimization 要是我们能有这样一个式子就好了&#xff1a; Test error rate <train error rate f(N,h,p)\text {…

L8_2

4.留下pid为12345的那个sh进程&#xff0c;杀死系统中所有其它sh进程 ps –ef|grep sh |awk ‘{if($2!”12345”) {print “kill “$2}}’ >killpid.sh cat killpid.sh ./killpid.sh 5. 根据以下日志文件&#xff0c;计算使用各种浏览器的人所占的百分比&#xff08;注意先排…

iOS 打包iPa

http://blog.fir.im/how-to-build-adhoc-ipa/ 之前都是打包好ipa然后发送给客户&#xff0c;特麻烦&#xff0c;fir.im网站不错 迅速获取自己手机的udid: http://fir.im/udid 网页安装ipa&#xff1a; http://fir.im/cxsv 转载于:https://www.cnblogs.com/shidaying/p/4829102…

# 遍历删除字典元素_第六章 字典

一、使用字典一个简单的字典字典是一系列键——值对。每个键都与一个值相关联&#xff0c;可以使用键来访问与之相关联的值。与键相关联的值可以是数字、字符串、列表乃至字典。事实上&#xff0c;可将任何Python对象用作字典中的值。在Python中&#xff0c;字典用放在花括号{}…

user-select属性用法

这是在css3 UI规范中新增的一个功能&#xff0c;用来控制内容的可选择性。 auto——默认值&#xff0c;用户可以选中元素中的内容none——用户不能选择元素中的任何内容text——用户可以选择元素中的文本element——文本可选&#xff0c;但仅限元素的边界内(只有IE和FF支持)all…

弄清 CSS3 的 transition 和 animation

弄清 CSS3 的 transition 和 animation 原文:弄清 CSS3 的 transition 和 animation弄清 CSS3 的 transition 和 animation transition transition 属性是transition-property,transition-duration,transition-timing-function,transition-delay的简称,用于设定一个元素的两个状…

【SVM】简单介绍(二)

1、SVM另一种推法 我们不管分类平面&#xff0c;直接去假设Margin的两个边界&#xff1a; Plus-plane {x:w⋅xb1}Minus-plane {x:w⋅xb−1}\begin{aligned} & \text { Plus-plane }\{\boldsymbol{x}: \boldsymbol{w} \cdot \boldsymbol{x}b1\} \\ & \text { Minus-plan…

图像像素点赋值_Python 图像处理 OpenCV (2):像素处理与 Numpy 操作以及 Matplotlib 显示图像...

普通操作1. 读取像素读取像素可以通过行坐标和列坐标来进行访问&#xff0c;灰度图像直接返回灰度值&#xff0c;彩色图像则返回B、G、R三个分量。需要注意的是&#xff0c; OpenCV 读取图像是 BGR 存储显示。灰度图片读取操作&#xff1a;import cv2 as cv# 灰度图像读取gray_…

cocopods

一、什么是CocoaPods 1、为什么需要CocoaPods 在进行iOS开发的时候&#xff0c;总免不了使用第三方的开源库&#xff0c;比如SBJson、AFNetworking、Reachability等等。使用这些库的时候通常需要&#xff1a; 下载开源库的源代码并引入工程向工程中添加开源库使用到的framework…

CSS3学习手记(10) 过渡

CSS3过渡 允许css的属性值在一定的时间内平滑地过渡在鼠标单击、获取焦点、被点击或对元素任何改变中触发&#xff0c;并圆滑地以动画效果改变CSS的属性值transition transition-property属性检索或设置对象中的参与过渡的属性 语法 transition-property:none|all|property …

POJ 1286 Necklaces of Beads (Burnside定理,有限制型)

题目链接&#xff1a;http://vjudge.net/problem/viewProblem.action?id11117 就是利用每种等价情形算出置换节之后算组合数 #include <stdio.h> #include <cstring> #include <cstdlib> #include <algorithm> #include <cmath>using namespace…

全局搜索快捷键_Windows 自带的聚合搜索来了,与 Mac 的 Spotlight 相比体验如何?...

最近 Windows 10 推出了自带的聚合搜索功能 PowerToys Run&#xff0c;取代了之前的 WinR。苹果的 macOS 以人性化著称&#xff0c;有几个功能让 Windows 用户一直很羡慕&#xff0c;比如全局的聚合搜索工具 Spotlight。在任何界面 command空格&#xff0c;输入关键字就能搜索电…

transform你不知道的那些事

transform是诸多css3新特性中最打动我的&#xff0c;因为它让方方正正的box module变得真实了。 transform通过一组函数实现了对盒子大小、位置、角度的2D或者3D变换。不过很长时间内&#xff0c;我对以下问题都想不太明白&#xff1a; 1、尺寸缩放scale与zoom变换有何不同&…

【SVM】简单介绍(三)

我们考虑SVM的对偶问题&#xff0c;我们通常是在对偶空间中进行求解的。 1、Lagrange Multipliers 对于一个很一般的问题 Minimize f(x)subject to {a(x)≥0b(x)≤0c(x)0\begin{aligned} \text { Minimize } & f(x) \\ \text { subject to } \quad & \left\{\begin{a…

玩转iOS开发:NSURLSession讲解(三)

文章分享至我的个人技术博客: https://cainluo.github.io/14986211698053.html 前言 虽然前面两讲都是说了NSURLSession的一些理论上的知识, 但我们现在起码对NSURLSession有个大概的了解, 并不会像一开始的那样, 一脸懵逼的看着, 这个请求是什么鬼, 那个方法是什么鬼, Task是什…

轻松搞定面试中的二叉树题目

版权全部&#xff0c;转载请注明出处&#xff0c;谢谢&#xff01;http://blog.csdn.net/walkinginthewind/article/details/7518888 树是一种比較重要的数据结构&#xff0c;尤其是二叉树。二叉树是一种特殊的树&#xff0c;在二叉树中每一个节点最多有两个子节点&#xff0c;…

李倩星r语言实战_《基于R的统计分析与数据挖掘》教学大纲

《基于R的统计分析与数据挖掘》课程教学大纲课程代码&#xff1a;090542009课程英文名称&#xff1a;R Language and Data Mining课程总学时&#xff1a;32讲课&#xff1a;32实验&#xff1a;0上机&#xff1a;0适用专业&#xff1a;应用统计学大纲编写(修订)时间&#xff1a;…

自动化测试小结

最近差不多一年从事自动化的测试工作&#xff0c;从开始对自动化一点都不了解到现在能从实现用例、手动命令行执行用例、自制工具来执行用例&#xff0c;感觉进步还是有的。 自动化测试对于手动测试应该是有不小的优势的&#xff0c;虽然在自动化的用例实现中刚开始的时候会显得…

python地理可视化_【Python教程】地理可视化之二

Basemap是Matplotlib的一个子包&#xff0c;负责地图绘制。昨天的推送对如何绘制风向图进行了描述&#xff0c;本文再次利用该包简单介绍如何绘制海洋及海冰温度彩色图示&#xff0c;该图常见于NOAA官网。具体操作如下&#xff1a;导入命令1)设置工作环境并导入程序包%cd "…