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

所属分类:UI,其他-背景,动画效果

 96336  721  查看评论 (11)
分享到微信朋友圈
X
4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效 ie兼容10

这是一组共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;}              
相关插件-背景,动画效果

jquery形象照片卷轴插件

jquery形象照片卷轴插件
  背景
 39284  363

jQuery全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 41256  493

jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
  背景
 68610  335

jquery固定标题控制插件Midnight.js

midnight.js是在页面滚动时控制多标题设计的开关jQuery插件,所以对应下面的内容你总能看到一个标题。
  背景
 41530  532

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Q ・ 0
    2018/5/31 15:10:54
    augushong 0
    2018/3/19 18:36:20
    确实不好复用 笑哭! 回复
    つ风吹起如花般细碎的流年 0
    2018/1/16 10:25:23

    请允许我擦亮膝盖

    回复
    851091009 0
    2016/12/2 10:12:07
    赞!!!!!!!! 回复
    lyskyfy 0
    2016/10/13 14:10:06
    看着是很爽~ 自己想复用不是那么容易的~ 回复
    不知独乐 0
    2016/3/1 10:03:20
    Hello,GoodBye 0
    2016/2/12 20:02:13
    醒 ※ 醒 0
    2015/6/5 11:06:34
    微笑的海绵 0
    2015/3/18 16:11:42
    真的很赞的插件啊 回复
    快乐的con 0
    2015/3/17 21:03:01
    在手机上不能打开侧边栏啊 5s ios7 ios8都试过了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复