手风琴

Bootstrap垂直手风琴菜单效果

阿里云


这是一款 bootstrap 垂直手风琴菜单效果。该 bootstrap 垂直手风琴菜单效果利用 CSS 伪元素来制作一些漂亮的装饰效果,使原生的 bootstrap 手风琴更加漂亮。

使用方法:

在页面中引入 bootstrap 相关文件,以及 jquery 和 fontawesome.min.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  2. <link href="css/fontawesome.min.css" rel="stylesheet" type="text/css">
  3. <script src='js/jquery.min.js'></script>
  4. <script src="js/bootstrap.min.js"></script>

HTML 结构:

该 bootstrap 垂直手风琴菜单效果的 HTML 结构如下:

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-6">
  4.             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  5.                 <div class="panel panel-default">
  6.                     <div class="panel-heading" role="tab" id="headingOne">
  7.                         <h4 class="panel-title">
  8.                             <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  9.                                 Section 1
  10.                             </a>
  11.                         </h4>
  12.                     </div>
  13.                     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  14.                         <div class="panel-body">
  15.                             <p>Lorem ipsum dolor sit amet, ...</p>
  16.                         </div>
  17.                     </div>
  18.                 </div>
  19.                 <div class="panel panel-default">
  20.                     <div class="panel-heading" role="tab" id="headingTwo">
  21.                         <h4 class="panel-title">
  22.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  23.                                 Section 2
  24.                             </a>
  25.                         </h4>
  26.                     </div>
  27.                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  28.                         <div class="panel-body">
  29.                             <p>Lorem ipsum dolor sit amet, ...</p>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.                 <div class="panel panel-default">
  34.                     <div class="panel-heading" role="tab" id="headingThree">
  35.                         <h4 class="panel-title">
  36.                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  37.                                 Section 3
  38.                             </a>
  39.                         </h4>
  40.                     </div>
  41.                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  42.                         <div class="panel-body">
  43.                             <p>Lorem ipsum dolor sit amet,...</p>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49. </div>

CSS 样式:

然后为该 bootstrap 垂直手风琴添加下面的 CSS 代理来进行效果美化。

  1. a:hover,a:focus{
  2.     text-decoration: none;
  3.     outline: none;
  4. }
  5. #accordion .panel{
  6.     border: none;
  7.     border-radius: 0;
  8.     box-shadow: none;
  9.     margin: 0 30px 10px 30px;
  10.     overflow: hidden;
  11.     position: relative;
  12. }
  13. #accordion .panel-heading{
  14.     padding: 0;
  15.     border: none;
  16.     border-radius: 0;
  17.     position: relative;
  18. }
  19. #accordion .panel-title a{
  20.     display: block;
  21.     padding: 15px 20px;
  22.     margin: 0;
  23.     background: #fe7725;
  24.     font-size: 18px;
  25.     font-weight: 700;
  26.     letter-spacing: 1px;
  27.     color: #fff;
  28.     border-radius: 0;
  29.     position: relative;
  30. }
  31. #accordion .panel-title a.collapsed{ 
  32.   background: #1c2336;}
  33. #accordion .panel-title a:before,
  34. #accordion .panel-title a.collapsed:before{
  35.     content: "\f068";
  36.     font-family: fontawesome;
  37.     width: 30px;
  38.     height: 30px;
  39.     line-height: 25px;
  40.     border-radius: 50%;
  41.     background: #fe7725;
  42.     font-size: 14px;
  43.     font-weight: normal;
  44.     color: #fff;
  45.     text-align: center;
  46.     border: 3px solid #fff;
  47.     position: absolute;
  48.     top: 10px;
  49.     right: 14px;
  50. }
  51. #accordion .panel-title a.collapsed:before{
  52.     content: "\f067";
  53.     background: #ababab;
  54.     border: 4px solid #626262;
  55. }
  56. #accordion .panel-title a:after,
  57. #accordion .panel-title a.collapsed:after{
  58.     content: "";
  59.     width: 17px;
  60.     height: 7px;
  61.     background: #fff;
  62.     position: absolute;
  63.     top: 22px;
  64.     right: 0;
  65. }
  66. #accordion .panel-title a.collapsed:after{
  67.     width: 19px;
  68.     background: #ababab;
  69. }
  70. #accordion .panel-body{
  71.     border-left: 3px solid #fe7725;
  72.     border-top: none;
  73.     background: #fff;
  74.     font-size: 15px;
  75.     color: #1c2336;
  76.     line-height: 27px;
  77.     position: relative;
  78. }
  79. #accordion .panel-body:before{
  80.     content: "";
  81.     height: 3px;
  82.     width: 50%;
  83.     background: #fe7725;
  84.     position: absolute;
  85.     bottom: 0;
  86.     left: 0;
  87. }

Bootstrap 垂直手风琴菜单效果

已有 559 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!