CSS3实现滑出滑入左侧菜单
发布时间:2020-05-09 编辑:www.jquerycn.cn
jquery中文网为您提供CSS3实现滑出滑入左侧菜单等资源,欢迎您收藏本站,我们将为您提供最新的CSS3实现滑出滑入左侧菜单资源
如果我们未使用css3之前要实现滑入滑出动画菜单就必须用js或
jquery来实例了,有了css3之后我们可以直接使用它来实现,简单的很。
有时候我们需要在网站上的边栏上放一个客户帮助的表单,开始是放一个按钮在那里,点击之后滑出内容来,一般这种效果我们会用js来控制。现在CSS3也可以做到了哦。
这个是怎么做到的呢?那就要用到CSS3里面的:target这个标签了。
之前我也写过相类似用到:target的动画。比如:CSS3手风琴的两种制作方案 超酷的CSS3幻灯片效果
下面我们一起看看这个动画的实现思路。
1.固定这个盒子在某个位置。
2.把表单隐藏在里面,只露出一个点击按钮。
3.点击按钮时表单画出来,同时按钮文字改变
4.再次点击按钮,表单缩进去了。
思路出来了,我们可以看到,这里面需要两个步骤,一个出来,一个缩进,那我们要用:target的话,显然需要两个目标了。不然是无法完成两个动作的,当然你可以考虑用之前在手风琴案例里面提到:checked这个标签来制作。这里就不说了。
HTML代码
代码如下 | 复制代码 |
<div id="volet_clos"> <div id="volet"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p> <p>vero labore voluptates necessitatibus ut? Et</p> <a href="#volet" aria-hidden="true">滑出</a> <a href="#volet_clos" aria-hidden="true">滑入</a> </div> </div> |
CSS代码
代码如下 | 复制代码 |
#volet { width: 250px; padding: 10px; background: #6B9A49; color: #fff; } #volet a.ouvrir, #volet a.fermer { padding: 10px 25px; background: #555; color: #fff; text-decoration: none; } #volet { position: absolute; left: -270px; /* test fixed scroll, on retire la position top */ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } #volet a.ouvrir, #volet a.fermer { position: absolute; right: -88px; top: 150px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); -moz-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } #volet a.fermer { display: none; } #volet:target { left: 10px; } /* code pour la fermeture */ #volet:target a.fermer { display: block; } #volet:target a.ouvrir { display: none; } #volet_clos:target #volet { left: -270px; } /* test fixed scroll */ #volet_clos { position: fixed; top: 55px; left: 0; } |
如果用:checked的话那就变得简单了。你会怎么做呢?
代码如下 | 复制代码 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滑入滑出动画</title> <style type="text/css"> <!-- body { margin:0; padding:10px 40px; background:#F1EFE2; font-size: 1.4em; font-family: georgia, "trebuchet ms", arial, serif; height: 3000px; /* test fixed scroll */ } h1 { margin-top: 20px; margin-bottom: 40px; color: #345; text-shadow: 1px 1px 1px #fff; } h2 { color: #678; text-shadow: 1px 1px 1px #fff; font-size:1.1em } /* code du tutoriel ci-dessous */ #volet { width: 250px; padding: 10px; background: #6B9A49; color: #fff; } #volet a.ouvrir, #volet a.fermer { padding: 10px 25px; background: #555; color: #fff; text-decoration: none; } #volet { position: absolute; left: -270px; /* test fixed scroll, on retire la position top */ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } #volet a.ouvrir, #volet a.fermer { position: absolute; right: -88px; top: 150px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); -moz-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } #volet a.fermer { display: none; } #volet:target { left: 10px; } /* code pour la fermeture */ #volet:target a.fermer { display: block; } #volet:target a.ouvrir { display: none; } #volet_clos:target #volet { left: -270px; } /* test fixed scroll */ #volet_clos { position: fixed; top: 55px; left: 0; } --> </style> </head> <body> <h1>滑入滑出</h1> <h2>点击出来,再点击隐藏</h2> <div id="volet_clos"> <div id="volet"> <p>Lorem Elsass ipsum r茅chime amet sed bissame so libero. DNA, leo Richard?Schirmeck tellus</p> <p>Wurscht elementum semper tellus s'guelt Pfourtz?!</p> <a href="#volet" class="ouvrir" aria-hidden="true">滑出</a> <a href="#volet_clos" class="fermer" aria-hidden="true">滑入</a> </div> </div> </body> </html> |
您可能感兴趣的文章:
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
CSS3实现滑出滑入左侧菜单
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
HTML5单页面手势滑屏切换原理分析
7款风格新颖的jQuery/CSS3菜单导航分享
JQUERY实现左侧TIPS滑进滑出效果示例
对css滑动门技术的一些总结和归纳
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
CSS3伪类垂直菜单背景滑动动画效果