文档章节

4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效

mymlucifer
 mymlucifer
发布于 2015/03/16 13:07
字数 844
阅读 15
收藏 0

4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效

 

dreamweaver免费视频教程:

51RGB Dreamweaver板块

加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。

每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果。菜单栏中的菜单项以一个接一个的方式显示,这种效果是通过为它们分别添加 transition-delay 来实现的。下面来看看默认的滑动侧边栏效果的制作方法。

HTML结构

所有滑动侧边栏效果都是使用无序列表来制作的,在默认的实现中,将无序列表包装到class为mobile的div中,为了便于控制,外围还添加了一个wrapper包裹div。这个DEMO使用纯CSS制作,按钮使用的是一个checkbox输入框来制作。插件中使用了font-awesome图标字体

<div id="wrapper">

    <h2>

        Off Canvas Menu with Animated Links

    </h2>

    <div class="mobile">

        <!-- Checkbox to toggle the menu -->

        <input type="checkbox" id="tm" />

        <!-- The menu -->

        <ul class="sidenav">

            <li>

                <a href="#">

                    <i class="fa fa-check">

                    </i>

                    <b>

                        Tasks

                    </b>

                </a>

            </li>

            <li>

                <a href="#">

                    <i class="fa fa-inbox">

                    </i>

                    <b>

                        Messages

                    </b>

                </a>

            </li>

            <li>

                <a href="#">

                    <i class="fa fa-pencil">

                    </i>

                    <b>

                        New Post

                    </b>

                </a>

            </li>

            <li>

                <a href="#">

                    <i class="fa fa-cog">

                    </i>

                    <b>

                        Settings

                    </b>

                </a>

            </li>

            <li>

                <a href="#">

                    <i class="fa fa-star">

                    </i>

                    <b>

                        Starred

                    </b>

                </a>

            </li>

            <li>

                <a href="#">

                    <i class="fa fa-power-off">

                    </i>

                    <b>

                        Logout

                    </b>

                </a>

            </li>

        </ul>

        <!-- Content area -->

        <section>

            <!-- Label for #tm checkbox -->

            <label for="tm">

                Click Me

            </label>

        </section>

    </div>

</div>     

CSS样式

整个包裹div被设置为相对定位,并为其设置左浮动和阴影效果。

.mobile {

  float: left; position: relative;

  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);

  overflow: hidden;

}

这里的按钮制作使用了一个小技巧。作为按钮的checkbox被设置为隐藏状态,然后在<section>元素使用一个<label>元素来和它关联,将<label>制作为按钮样式,实际在点击<label>时,相当于点击了checkbox按钮。

/*Hiding the checkbox*/
 
#tm {
    display: none;
}
 
.mobile section label {
 
    color: white;
    font: bold 14px Montserrat;
    text - align: center;
 
    border: 2px solid white;
    border - radius: 4px;
 
    display: block;
    padding: 10px 0;
 
    width: 60 % ;
    position: absolute;
    left: 20 % ;
    top: 100px;
 
    cursor: pointer;
    text - transform: uppercase;
 
}

按钮的点击使用了checkbox hack 技术。

/*Animate content area to the right*/
#tm:checked ~ section {transform: translateX(150px);}
/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav b {opacity: 1; transform: translateX(0);}

最后,为每个滑动侧边栏菜单项添加一些延迟来制作一个接一个出现的效果:

#tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}

#tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}

#tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}

#tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}

#tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}

#tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}

 

代码下载地址:

http://www.51rgb.com/nbbs/thread-1692-1-1.html

 

 

光看文字怎么够 来看在线视频 手把手教你做网站!

Adobe官方讲师万晨曦指导 轻松幽默学习网站开发

Dreamweaver视频直达网址 51RGB Dreamweaver板块

 


© 著作权归作者所有

mymlucifer
粉丝 7
博文 61
码字总数 26911
作品 0
南昌
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
7个经典创意jQuery应用插件及源码

本文主要分享一些非常具有创意的jQuery应用插件,它们不仅在外观上别具一格,而且功能上也是那么富有新意,尤其是第一个jQuery平面时钟,其设计思路让人叹为观止。还是来看看以下这些jQuery插...

Lunaqi
2017/12/12
0
0
由纯CSS3实现的超酷飞行状下拉菜单特效

日期:2012-4-26 来源:GBin1.com 在线演示 本地下载 今天介绍一款来自script-tutorial的超酷飞行状菜单特效,和传统的下拉菜单不同,它的子菜单都是水平飞入而非滑动下拉出现,非常的与众不...

gbin1
2012/04/27
0
0
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0
微信小程序特殊效果合集—左滑、气泡各种酷炫动画

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法。下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考。 1、文字跑马灯效果:htt...

anda0109
2017/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CAP和BASE理论

CAP和BASE理论 CAP理论和BASE理论是分布式系统的“基石”,论述了分布式系统的能力边界。 CAP理论 CAP理论指出对于一个分布式数据存储系统中,不可能同时满足以下三点: 一致性(Consistency...

陶小陶
24分钟前
2
0
库克称未来十年这项技术非常重要

苹果全球WWDC奖学金得主小型交流会召开,此次交流会共有来自全球的12名WWDC19奖学金获得者参与,其中有两名中国开发者。两名年轻的中国学生在自己的应用设计中都利用了苹果的ARKit工具,通过...

linuxCool
35分钟前
3
0
使用Navicat连接阿里云服务器宝塔面板里创建的数据库

今天试着使用了Navicat去连接阿里云轻量服务器的数据库,报10060错误,解决方法如下: 数据库设置【权限】为 “所有人”,之后进行下一步的设置: 在宝塔的【安全】选项 -> 【防火墙】->放行...

htdp
37分钟前
1
0
git强制覆盖本地命令

git强制覆盖: git fetch --all git reset --hard origin/master git pull git强制覆盖本地命令(单条执行): git fetch --all && git reset --hard origin/master && git pull...

chenhongjiang
50分钟前
4
0
10分钟详解Spring全家桶7大知识点

Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶。它包括SpringMVC、SpringBoot、Spring Cloud、Spring Cloud Dataflow等解决方案。 很多研发人员把spring看作心目...

peakedness丶
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部