A Pen by Bingo Yang.

index.html

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" itemprop>

<ul>
  <li class="section-selector">
    <div class="s-half-h b-block"><i class="glyphicon glyphicon-home"></i></div>
    <div class="s-half-h hpanel">
      <div class="s-half-v b-block s-main">
        <i class="glyphicon glyphicon-home"></i>
      </div>
      <div class="s-half-v b-block">
        <i class="glyphicon glyphicon-home"></i>
      </div>
    </div>
    <h3>我的首頁</h3>
  </li>
  
  <li class="section-selector">
    <div class="s-half-h b-block"><i class="glyphicon glyphicon-heart"></i></div>
    <div class="s-half-h hpanel">
      <div class="s-half-v b-block"><i class="glyphicon glyphicon-heart"></i></div>
      <div class="s-half-v b-block"><i class="glyphicon glyphicon-heart"></i></div>
    </div>
    <h3>我的最愛</h3>
  </li>
  
  <li class="section-selector">
    <div class="s-half-h b-block"><i class="glyphicon glyphicon-user"></i></div>
    <div class="s-half-h hpanel">
      <div class="s-half-v b-block"><i class="glyphicon glyphicon-user"></i></div>
      <div class="s-half-v b-block"><i class="glyphicon glyphicon-user"></i></div>
    </div>
    <h3>客戶名單</h3>
  </li>

  
  <li class="section-selector">
    <div class="s-half-h b-block"><i class="glyphicon glyphicon-search"></i></div>
    <div class="s-half-h hpanel">
      <div class="s-half-v b-block"><i class="glyphicon glyphicon-search"></i></div>
      <div class="s-half-v b-block"><i class="glyphicon glyphicon-search"></i></div>
    </div>
    <h3>客戶搜尋</h3>
  </li>
</ul>

style.scss

@import "compass";
body{
  padding: 100px; 
}
ol, ul {
list-style: none;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}


$nav-section-border-radius: 4px;
$nav-section-margin: 2px;
$nav-section-panel-size: 18px;
$nav-main-font-size: 30px;
li.section-selector{
  margin-right: 20px;
}
.section-selector{
  float: left;
  text-align: center;  
  .b-block{
     display:table;     
     background-color: grey;
     text-align: center;
     cursor: pointer;
     overflow: hidden;
     font-size: $nav-main-font-size;
     @include border-radius($nav-section-border-radius); 
     @include transition-property(transform, opacity, border-radius);
     @include transition-duration(0.3s);
     @include transition-timing-function(ease-out);
     &:hover{
       border: $nav-section-margin solid #FFF;
       @include transform(scale(1.5));
       @include border-radius($nav-section-border-radius+5); 
     }
     i{
       display:table-cell; 
       vertical-align:middle;
     }
  }
  .s-half-v.b-block > i {
     font-size: 12px;
     opacity: 0;
  }
  .s-half-v.b-block:hover > i {
     opacity: 1;
    
  }
  .s-half-h{
     width: $nav-section-panel-size*2;
     height: $nav-section-panel-size*2+1;
     float: left;
     margin: 0 $nav-section-margin;
    
     &.hpanel{
       width: $nav-section-panel-size;
     }
     :first-child{
       margin-bottom: $nav-section-margin;
     }
     :last-child{
       margin-top: $nav-section-margin;
     }
  }
  .s-half-v{
     height: $nav-section-panel-size;
     width: $nav-section-panel-size;
  }
  h3{
     opacity: 0;
     font-size: $nav-main-font-size/2;
     margin-top: 40px;  
     @include border-radius($nav-section-border-radius); 
     @include transition-property(opacity, transform, margin);
     @include transition-duration(0.3s);
     @include transition-timing-function(ease-out);
  }
}

.section-selector:hover h3{
  opacity: 1;
  margin-top: 50px;    
  @include transform(scale(1.5));  
}

選單特效A.markdown

選單特效A

A Pen by Bingo Yang on CodePen.

License.