当前位置:主页 > 网页特效 > TAB标签 >

jQuery和CSS3扁平化风格滑动面板

发布时间:2018/07/05 来源:互联网 浏览: 关键词:jquery CSS3 扁平化 tab 滑动面板 
jQuery和CSS3扁平化风格滑动面板 jQuery和CSS3扁平化风格滑动面板
阿里云

简要教程

这是一款时下最为流行的 jQuery 和 CSS3 扁平风格滑动面板插件

HTML结构

该滑动面板使用无序列表制作,HTML结构非常简单。每个列表项中使用一个div .info-box-green作为整个滑动面板的wrapper。里面的h4标签是面板的标题,div.info-content是面板的内容。最后空的<span>是面板右边显示的"+"号。

<ulclass="wrapper">
  <li>
    <divclass="info-box-green">
      <h4class="entypo-tools"> Featured Services </h4>
   
      <divclass="info-content">
        <divclass="text">
          <p>...</p>
        </div>
        <spanclass="entypo-plus"id="expand-green"></span>
      </div>
    </div>
  </li>
 
  ...
 
</ul>

CSS样式

该滑动面板使用CSS3来制作扁平化风格的样式。在面板打开时,面板右边的“+”号还有一个旋转动画,由CSS3 transform完成的。

.info-box-green, .info-box-red, .info-box-sky {
  margin:50pxauto;
  padding:0;
  width:480px;
  -webkit-box-shadow:08px6px-6pxblack;
     -moz-box-shadow:08px6px-6pxblack;
          box-shadow:08px6px-6pxblack;
}
 
.info-box-redh4{
  -webkit-border-radius:10px;
  border-radius:10px;
  margin-bottom:-10px;
}
 
.info-box-red> .info-content > .text {
 -webkit-border-radius:0010px10px;
  border-radius:0010px10px;
}
 
.info-box-greenh4, .info-box-green> .info-content > .text {
 background-color:#00AB83;
}
 
.info-box-redh4, .info-box-red> .info-content > .text {
  background-color:#FF434C;
}
 
.info-box-sky h4, .info-box-sky > .info-content > .text {
  background-color:#00A5C3;
}
 
.info-box-greenh4, .info-box-redh4, .info-box-sky h4{
  padding:25px;
  font-size:1.125em;
  font-weight:400;
  color:#FFF;
}
 
.info-box-green> .info-content > .text, .info-box-red> .info-content > .text, .info-box-sky > .info-content > .text {
  padding:0px;
  font-size:1em;
  line-height:1.5em;
  height:0;
  color:#FFF;
  overflow:hidden;
  -webkit-transition:  height200ms ease; 
     -moz-transition:  height200ms ease; 
       -o-transition:  height200ms ease; 
          transition:  height200ms ease;
}
 
.info-box-green> .info-content > .text > p, .info-box-red> .info-content > .text > p, .info-box-sky > .info-content > .text > p {
  padding:20px20px60px;
}
 
.info-box-sky > .info-content > .text {
  background-color:#FFF;
  color:#444;
  border-radius:0;
}
  
.info-box-green> .info-content > .text.open-green, .info-box-red> .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {
  display:block;
  height:auto;
}
 
.info-box-green> .info-content > span.close-green, .info-box-red> .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {
  -webkit-transform:rotate(135deg);
     -moz-transform:rotate(135deg);
       -o-transform:rotate(135deg);
      -ms-transform:rotate(135deg);
}
 
.info-box-greenspan, .info-box-redspan, .info-box-sky span {
  display:inline-block;
  float:right;
  position:relative;
  bottom:60px;
  right:10px;
  margin:0;
  padding:10px;
  color:#FFF;
  font-size:2em;
  cursor:pointer;
  /*  Rotate '+' to 'X' */
  -webkit-transition:all600ms ease-in-out;
     -moz-transition:all600ms ease-in-out;
       -o-transition:all600ms ease-in-out;
      -ms-transition:all600ms ease-in-out;
          transition:all600ms ease-in-out;
}
 
.info-box-sky > .info-content > span.close-sky {
  color:#444;
}
 
.info-box-redspan {
  position:relative;
  bottom:50px;
  right:10px;
}

JAVASCRIPT

该滑动面板插件使用 jQuery 来切换样式完成面板的展开和收缩。

<script>
  $('#expand-green').on('click',function() {
      $(this).toggleClass('close-green');
      $('.text').toggleClass('open-green').end();
  });
  $('#expand-red').on('click',function() {
      $(this).toggleClass('close-red');
      $('.text').toggleClass('open-red');
  });
  $('#expand-sky').on('click',function() {
      $(this).toggleClass('close-sky');
      $('.text').toggleClass('open-sky');
  });
</script>

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top