jQuery和CSS3手风琴样式分步向导特效

所属分类:导航-手风琴菜单

 5015  21  查看评论 (1)
jQuery和CSS3手风琴样式分步向导特效 ie兼容8

使用方法

HTML结构

该用户向导的HTML结构使用无序列表的HTML结构,每一个手风琴项是一个li元素。

<div class="container">
  <ul class="payment-wizard">
      <li class="active">
        <div class="wizard-heading">
            1. Login Information
              <span class="icon-user"></span>
          </div>
          <div class="wizard-content">
            <p>Create your Login Form here as per your requirement.</p>
            <button class="btn-green done" type="submit">Continue</button>
          </div>
      </li>
      ......
    </ul>
</div>

CSS样式

该用户向导的CSS样式比较简单,其中每个手风琴项都带有一些好看的阴影效果。

.wizard-content{
  display: none; 
  float: left; 
  width: 100%; 
  background-color: #fff; 
  box-shadow: 0 8px 8px #d2d2d2; 
  padding: 15px; 
  box-sizing: border-box;
}

另外按钮被制作为3D效果,这主要通过:before伪元素来制作按钮的底部阴影效果,用于模拟立体的感觉。

.btn-green{
  color: #fff; 
  float: right; 
  border: 0; 
  padding: 7px 10px; 
  min-width: 92px; 
  z-index: 1; 
  cursor: pointer; 
  font-size: 14px; 
  text-transform: uppercase; 
  background-color: #5fba57; 
  border-radius: 3px; 
  border-bottom: 3px solid #289422; 
  position: relative; 
  transition: 0.3s;
}
.btn-green:before{
  content: ""; 
  width: 100%; 
  height: 0; 
  border-radius: 3px; 
  z-index: -1; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  background-color: #289422; 
  transition: 0.3s;
}
.btn-green:hover:before{height: 100%;}

JavaScript

该用户向导插件使用jQuery代码来完成相应元素的class类的添加和移除,以及手风琴项的展开和收缩动画。

$(window).load(function(){  
  $(".done").click(function(){
    var this_li_ind = $(this).parent().parent("li").index();
    if($('.payment-wizard li').hasClass("jump-here")){
      $(this).parent().parent("li").removeClass("active").addClass("completed");
      $(this).parent(".wizard-content").slideUp();
      $('.payment-wizard li.jump-here').removeClass("jump-here");
    }else{
      $(this).parent().parent("li").removeClass("active").addClass("completed");
      $(this).parent(".wizard-content").slideUp();
      $(this).parent().parent("li").next("li:not('.completed')")
            .addClass('active').children('.wizard-content').slideDown();
    }
  });
   
  $('.payment-wizard li .wizard-heading').click(function(){
    if($(this).parent().hasClass('completed')){
      var this_li_ind = $(this).parent("li").index();   
      var li_ind = $('.payment-wizard li.active').index();
      if(this_li_ind < li_ind){
        $('.payment-wizard li.active').addClass("jump-here");
      }
      $(this).parent().addClass('active').removeClass('completed');
      $(this).siblings('.wizard-content').slideDown();
    }
  });
})


相关插件-手风琴菜单

jQuery鼠标经过风琴展开效果

jQuery鼠标经过水平手风琴展开收缩动画效果
  手风琴菜单
 3741  76

jquery手风琴折叠速度差菜单栏

以jquery编写整体风格为手风琴似的菜单,垂直方向打开之后会依次从右边出现二级菜单栏。
  手风琴菜单
 7931  46

jQuery css3配合实现状态手风琴

jQuery css3变形手风情插件,代码简单、切换效果好。
  手风琴菜单
 5148  101

bootstrap垂直手风琴动画特效

一款基于Bootstrap的垂直手风琴特效。该垂直手风琴特效基于原生的Bootstrap Accordion组件来制作,通过CSS3来对它进行美化,效果美观大方。
  手风琴菜单
 3765  30

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    mico 0
    2016/8/30 17:08:05
    这个挺不错的 ! 回复
取消回复