图片/图形
CSS3滑动隐藏侧边栏菜单特效
PetitQ
这是一组共 4 种效果非常炫酷的 CSS3 移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带 3D transforms 的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用 translate 来实现滑动侧边栏的效果。每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果。菜单栏中的菜单项以一个接一个的方式显示，这种效果是通过为它们分别添加 transition-delay 来实现的。下面来看看默认的滑动侧边栏效果的制作方法。
HTML 结构
所有滑动侧边栏效果都是使用无序列表来制作的，在默认的实现中，将无序列表包装到 class 为 mobile 的 div 中，为了便于控制，外围还添加了一个 wrapper 包裹 div。这个 DEMO 使用纯 CSS 制作，按钮使用的是一个 checkbox 输入框来制作。插件中使用了 font-awesome 图标字体，可以点击这里查看 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 被设置为隐藏状态，然后在
/*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;}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
