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

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

简要教程
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制作的效果,非常炫酷的下拉列表框特效,希望大家喜欢

(0)

相关推荐

  • jQuery 3.0 的变化及使用方法

    jQuery ,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器.自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松. 时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. •jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本 •jQuer

  • 酷炫jQuery全屏3D焦点图动画效果

    这又是一款很不错的jQuery焦点图动画,它的特点是整个焦点图基本是全屏显示的,非常大气,而且图片的倾斜也给整个焦点图3D立体的视觉效果,而且焦点图的图片切换非常流畅,相当实用. HTML代码: <div class="wrapper"> </div> <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"&

  • jQuery仅用3行代码实现的显示与隐藏功能完整实例

    本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能.分享给大家供大家参考.具体如下: jQuery技术相当好使用,的确可以用很少的代码实现想要的功能,比如这款经常用到的"显示"与"隐藏"的功能,只需要3行代码就实现了,确实够给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下: <!doctype html>

  • jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法

    前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然就不能获取到session,然后u

  • 解决jQuery上传插件Uploadify出现Http Error 302错误的方法

    之前介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然就不能获取到session,然后upl

  • 使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效

    这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示      源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig

  • jquery+css3实现会动的小圆圈效果

    本文实例讲述了jquery+css3实现会动的小圆圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>那些变换颜色的小豆豆</title> <script type="text/javascript&quo

  • 基于jQuery和CSS3制作响应式水平时间轴附源码下载

    我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴. 效果展示     源码下载 HTML 我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日

  • 即将发布的jQuery 3 有哪些新特性

    jQuery 的横空出世,至今已有十个年头了,而它的长盛不衰显然不是没有理由的.jQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQue

  • 程序员必知35个jQuery 代码片段

    jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果.本文将为你介绍一些jquery实用的技巧,希望可以帮助你更加高效地使用jQuery. 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });

随机推荐