jQuery+CSS3折叠卡片式下拉列表框实现效果


Posted in Javascript onNovember 02, 2015

jQuery下拉列表框特效将每一个列表项都制作为卡片的样式,打开和关闭它有打开和关闭百叶窗的感觉,效果非常不错,分享给大家。

jQuery+CSS3折叠卡片式下拉列表框实现效果

jQuery+CSS3折叠卡片式下拉列表框实现效果

简要教程
HTML结构
该下拉列表框特效的列表项使用一个无序列表来制作,用于切换打开和关闭状态的元素是一个超链接元素。

<div class="container">
 <div class="card-drop">
  <a class='toggle' href="#">
   <i class='fa fa-suitcase'></i> 
   <span class='label-active'>Everyting</span>
  </a>
  <ul>
   <li class='active'>
    <a data-label="Everyting" href="#"><i class='fa fa-suitcase'></i> Everyting</a>
   </li>
   ......
  </ul>
 </div>
</div>

CSS样式
a.toggle元素用于切换下拉列表的打开和关闭状态。为了制作点击时卡片上翻的效果,它被设置了transform-style: preserve-3d;属性。同时修改了转换的原点transform-origin: 50% 0%;。

.card-drop > a.toggle {
 position: relative;
 z-index: 100;
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -moz-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -moz-transition: linear 0.1s;
 -o-transition: linear 0.1s;
 -webkit-transition: linear 0.1s;
 transition: linear 0.1s;
}

但它处于激活状态的时候,它会沿X轴进行旋转,并使用:before和:after伪元素来制作角部三角形效果

.card-drop > a.toggle:active {
 -moz-transform: rotateX(60deg);
 -webkit-transform: rotateX(60deg);
 transform: rotateX(60deg);
}
.card-drop > a.toggle:active:after {
 -moz-transform: rotateX(180deg);
 -webkit-transform: rotateX(180deg);
 transform: rotateX(180deg);
}
.card-drop > a.toggle:before, .card-drop > a.toggle:after {
 content: "";
 position: absolute;
}
.card-drop > a.toggle:before {
 right: 25px;
 top: 50%;
 margin-top: -2.5px;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-top: 6px solid rgba(0, 0, 0, 0.8);
}
.card-drop > a.toggle.active:before {
 transform: rotate(180deg);
}

列表项在切换时只是简单的使用jQuery来修改它们的top、width和margin-left属性,使其显示和隐藏。并使用ease-out作为CSS动画过渡效果。

.card-drop ul {
 position: absolute;
 height: 100%;
 top: 0;
 display: block;
 width: 100%;
}
.card-drop ul li {
 margin: 0 auto;
 -moz-transition: all, ease-out 0.3s;
 -o-transition: all, ease-out 0.3s;
 -webkit-transition: all, ease-out 0.3s;
 transition: all, ease-out 0.3s;
 position: absolute;
 top: 0;
 z-index: 0;
 width: 100%;
}
.card-drop ul li a {
 border-top: none;
}
.card-drop ul li a:hover {
 background-color: #4aa3df;
 color: #f3f9fd;
}
.card-drop ul li.active a {
 color: #fff;
 background-color: #258cd1;
 cursor: default;
}
.card-drop ul li.closed a:hover {
 cursor: default;
 background-color: #3498db;
}

 JavaScript

在jQuery代码中,setClosed()函数用于关闭所有的列表项,默认它们是处于关闭状态的。

function setClosed() {
  li.each(function (index) {
    $(this).css('top', index * 4).css('width', width - index * 0.5 + '%').css('margin-left', index * 0.25 + '%');
  });
  li.addClass('closed');
  toggler.removeClass('active');
}
setClosed();

然后监听.toggle元素的mousedown事件,该事件中切换列表的打开和关闭状态。

toggler.on('mousedown', function () {
  var $this = $(this);
  if ($this.is('.active')) {
    setClosed();
  } else {
    $this.addClass('active');
    li.removeClass('closed');
    li.each(function (index) {
      $(this).css('top', 60 * (index + 1)).css('width', '100%').css('margin-left', '0px');
    });
  }
});

最后在每一个列表项被点击的时候,将该列表项的内容移动到第一项中,被关闭整个下来列表。

links.on('click', function (e) {
  var $this = $(this), label = $this.data('label');
  icon = $this.children('i').attr('class');
  li.removeClass('active');
  if ($this.parent('li').is('active')) {
    $this.parent('li').removeClass('active');
  } else {
    $this.parent('li').addClass('active');
  }
  toggler.children('span').text(label);
  toggler.children('i').removeClass().addClass(icon);
  setClosed();
  e.preventDefault;
});

以上就是为大家分享的jQuery和CSS3制作的效果,非常炫酷的下拉列表框特效,希望大家喜欢

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 #Javascript
纯javascript移动优先的幻灯片效果
Nov 02 #Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 #Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 #Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
Python实现KNN邻近算法
2021/01/28 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
跳蚤市场口号
2014/06/13 职场文书
电子商务专业求职信
2014/07/10 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技