Bootstrap3扁平风格垂直手风琴特效

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

 47964  388  查看评论 (7)
分享到微信朋友圈
X
Bootstrap3扁平风格垂直手风琴特效 ie兼容8

使用方法

使用该手风琴特效需要在页面中引入bootstrap v3版本的相关文件和jquery文件。另外,手风琴的图标使用了谷歌的Material+Icons字体,使用是也要将其引入。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='js/jauqery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

HTML结构

该垂直手风琴使用bootstrap的网格系统来控制大小,HTML结构采用Bootstrap Accordion的HTML结构。

<div class="container">
  <div class="col-md-6 col-sm-6">
    <h3>Default collapse with scaling icon</h3>
    <div class="panel-group wrap" id="bs-collapse">
 
      <div class="panel">
        <div class="panel-heading">
          <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#" href="#one">
          Collapse item #1
        </a>
      </h4>
        </div>
        <div id="one" class="panel-collapse collapse">
          <div class="panel-body">
           ......
          </div>
        </div>
 
      </div>
      <!-- end of panel -->
 
      ......
 
    </div>
    <!-- end of #bs-collapse  -->
  </div>
</div>

CSS样式

在CSS样式中,只是简单的设置了一些基本样式。并为每个手风琴项的头部设置动画过渡效果。另外还设置了2中图标在激活状态时的动画效果。

/* #bs-collapse icon scale option */ 
.panel-heading a:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  font-size: 24px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
 
.panel-heading.active a:before {
  content: ' ';
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0);
          transform: scale(0);
}
 
#bs-collapse .panel-heading a:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
 
#bs-collapse .panel-heading.active a:after {
  content: '\e909';
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/* #accordion rotate icon option */
 
#accordion .panel-heading a:before {
  content: '\e316';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
 
#accordion .panel-heading.active a:before {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

JavaScript

该手风琴特效使用jQuery代码来为相应的手风琴项在展开和收缩时添加和删除相应的class类。

$(document).ready(function() {
  $('.collapse.in').prev('.panel-heading').addClass('active');
  $('#accordion, #bs-collapse')
    .on('show.bs.collapse', function(a) {
      $(a.target).prev('.panel-heading').addClass('active');
    })
    .on('hide.bs.collapse', function(a) {
      $(a.target).prev('.panel-heading').removeClass('active');
    });
});


相关插件-手风琴菜单

简洁实用的jQuery手风琴插件

jquery.accdion是一款非常实用的jQuery手风琴插件。它代码简单,文件体积小,并且兼容IE8浏览器。它通过简单的设置即可以得到漂亮的手风琴图片切换效果。
  手风琴菜单
 34000  346

jQuery扁平化风格手风琴菜单

这是一款基于jQuery的扁平化风格的手风琴菜单,菜单是垂直的,点击菜单项即可垂直展开,显示对应菜单项的相关描述。另外,这款jQuery垂直手风琴菜单的菜单项还有一个漂亮的小图标,是一款比较实用的jQuery菜单插件。
  手风琴菜单
 34101  360

JQ手风琴菜单

一款兼容ie6的手风琴菜单
  手风琴菜单
 43138  314

手风琴展开动画效果(感谢上传手风琴效果的朋友)

因项目需要做一个这种风格的插件,正巧jq22上有同类型的插件。在此基础上进行精简及优化,欢迎大家使用。
  手风琴菜单
 30597  400

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    日光倾城 0
    2018/12/3 14:08:50
    很好看,很棒。 回复
    NIRVANA 0
    2018/4/27 17:17:44
    默认是4条 想再加1条要在哪里改呢
        Yheng1
        2018/4/28 9:30:11
        在class=“panel-group wrap”的div中新增class="panel"的div块就行了
        那谁?俄等?0
        2018/12/18 23:02:27
        默认关闭在哪改
        明眸° Sunshine0
        2019/3/14 16:31:17
        我看了下这个是给的ID呢,增加了,ID不一样咋个修改呢
    回复
    ?? 0
    2018/1/14 11:54:48
    天是蓝的 0
    2016/12/26 20:12:09
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复