这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效。

这四种效果各自是：默认的点击滑动側边栏菜单效果、带3D transforms的滑动側边栏效果、文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果。

每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果。

菜单条中的菜单项以一个接一个的方式显示，这样的效果是通过为它们分别加入 transition-delay
来实现的。以下来看看默认的滑动側边栏效果的制作方法。

插件中使用了font-awesome图标字体，能够点击这里查看font-awesome图标字体的參考和用法。

在线演示：http://www.htmleaf.com/Demo/201503121509.html

下载地址：http://www.htmleaf.com/css3/daohangcaidan/201503121508.html

CSS3超酷移动手机滑动隐藏側边栏菜单特效的更多相关文章

  1. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  2. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  3. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  4. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  5. HTML5/CSS3超酷环形动画菜单

    在线演示 本地下载

  6. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  7. iOS之滑动隐藏导航

    滑动隐藏导航狼栏 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offsetY = scrollView.content ...

  8. 【超酷超实用】CSS3可滑动跳转的分页插件制作教程

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

  9. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

随机推荐

  1. easyui源码翻译1.32--Calendar(日历)

    前言 前几天加班比较忙 未能及时更新翻译的 今天多发布几篇..下载该插件翻译源码 日历控件显示一个月的日历,允许用户选择日期和移动到下一个或上一个月.默认情况下,一周的第一天是周日.它可以通过设置'f ...

  2. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  3. Android 应用自动更新功能的代码

    由于Android项目开源所致,市面上出现了N多安卓软件市场.为了让我们开发的软件有更多的用户使用,我们需要向N多市场发布,软件升级后,我们也必须到安卓市场上进行更新,给我们增加了工作量.因此我们有必 ...

  4. USACO3.24Feed Ratios

    直接枚举到100水过 /* ID: shangca2 LANG: C++ TASK: ratios */ #include <iostream> #include<cstdio> ...

  5. ASP.NET 導入Excel

    常常碰到這種需求,為了避免自己每次寫Code都要東翻西找Sample,乾脆丟上來當備份 此外,也為了方便網路上的大大們Copy Paste方便,小弟已經順便標示要複製程式碼的起始結束位置 在歡樂的貼程 ...

  6. LoadLibraryEx及发回hmodule的一些细节

    LoadLibraryEx可以配合 DONT_RESOLVE_DLL_REFERENCES LOAD_LIBRARY_AS_DATAFILE LOAD_LIBRARY_AS_DATAFILE_EXCL ...

  7. mysql备份脚本

    [root@AY130828161048465847Z ~]# vi mysqlbak.sh #!/bin/bash USERNAME=rootPASSWORD=mysqlDBNAME=test DA ...

  8. Vimwiki使用笔记

    vimwiki使用笔记 vimwiki vimwiki installation syntax Inline links Image Link Header List Table code block ...

  9. myeclipse安装svn插件的多种方式

          开发者服务评测征文 十万现金悬赏大神 方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Ad ...

  10. jQuery-单击文字或图片内容放大显示效果插件

    css很强大,jQuery也很强大,两者结合在一起就是无比强大.这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物. 先来介绍css和jQuery各自发挥了什么作用吧: css: ...