伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:导航-手风琴菜单
 4596  38  查看评论 (2)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8

使用方法

在页面中引入bootstrap相关文件。<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="path/to/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>HTML结构该垂直手风琴列表的基本HTML结构如下。<div class="container">     <div class="row">         <div class="col-md-offset-3 col-md-6">             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">                 <div class="panel panel-default">                     <div class="panel-heading" role="tab" id="headingOne">                         <h4 class="panel-title">                             <a role="button" data-toggle="collapse" data-parent="#accordion" href="http://yzshield.com/quot;#collapseOne" aria-expanded="true" aria-controls="collapseOne">"                                 Section 1                             </a>                         </h4>                     </div>                     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">                         <div class="panel-body">                             <p>.... </p>                         </div>                     </div>                 </div>                 <div class="panel panel-default">                     <div class="panel-heading" role="tab" id="headingTwo">                         <h4 class="panel-title">                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="http://yzshield.com/quot;#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">"                                 Section 2                             </a>                         </h4>                     </div>                     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">                         <div class="panel-body">                             <p>...</p>                         </div>                     </div>                 </div>                 <div class="panel panel-default">                     <div class="panel-heading" role="tab" id="headingThree">                         <h4 class="panel-title">                             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="http://yzshield.com/quot;#collapseThree" aria-expanded="false" aria-controls="collapseThree">"                                 Section 3                             </a>                         </h4>                     </div>                     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">                         <div class="panel-body">                             <p>.... </p>                         </div>                     </div>                 </div>             </div>         </div>     </div> </div>CSS样式该垂直手风琴列表的css样式如下:a:hover,a:focus{     text-decoration: none;     outline: none; } #accordion{     padding-right: 24px;     padding-left: 24px;     z-index: 1; } #accordion .panel{     border: none;     box-shadow: none; } #accordion .panel-heading{     padding: 0;     border-radius: 0;     border: none; } #accordion .panel-title{     padding: 0; } #accordion .panel-title a{     display: block;     font-size: 16px;     font-weight: bold;     background: #e16b47;     color: #f7c59f;     padding: 15px 25px;     position: relative;     margin-left: -24px;     transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed{     background: #f7c59f;     color: #e16b47;     margin-left: 0;     transition: all 0.3s ease 0s; } #accordion .panel-title a:before{     content: "";     border-left: 24px solid #e16b47;     border-top: 24px solid transparent;     border-bottom: 24px solid transparent;     position: absolute;     top: 0;     right: -24px;     transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed:before{     border-left-color: #f7c59f; } #accordion .panel-title a:after{     content: "\f106";     font-family: 'FontAwesome';     position: absolute;     top: 30%;     right: 15px;     font-size: 18px;     color: #f7c59f; } #accordion .panel-title a.collapsed:after{     content: "\f107";     color: #e16b47; } #accordion .panel-collapse{     position: relative; } #accordion .panel-collapse.in:before{     content: "";     border-right: 24px solid #f7c59f;     border-bottom: 18px solid transparent;     position: absolute;     top: 0;     left: -24px; } #accordion .panel-body{     font-size: 14px;     color: #333;     background: #e4e4e4;     border-top: none;     z-index: 1; }
相关伟德BETVICTOR-手风琴菜单

jquery手风琴

jquery仿手风琴效果
  手风琴菜单
 7864  82

jQuery扁平化风格手风琴菜单

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

jquery手风琴折叠式

多级菜单 JS 手风琴
  手风琴菜单
 11562  53

jQuery鼠标经过风琴展开效果

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

讨论这个项目(2)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    SiriBen 0
    2017/11/19 10:44:25
    这个效果挺不错的,而且兼用移动端 回复
    夜啸苍姬 0
    2017/10/26 14:09:15
取消回复