[Code] Thanh menu động cực hấp dẫn với jQuery, Font-Awesome và CSS3

  • Giựt

    Demo :


    Code:
    http://www.thuthuatweb.net/wp-content/uploads/baiviet/2015/02/tao-menu-dong-cuc-hap-dan-voi-jquery-font-awesome-va-css3.jpg



    Cách làm


    Cho vào nơi cần hiện :

    Code:
    <div class="parent2">
      <div class="test1"><i class="fa fa-user fa-2x"></i></div>
      <div class="test2"><i class="fa fa-graduation-cap fa-2x"></i></div>
      <div class="test3"><i class="fa fa-code fa-2x"></i></div>
      <div class="test4"><i class="fa fa-envelope-o fa-2x"></i></div>
      <div class="mask2"><i class="fa fa-home fa-3x"></i></div>
    </div>
    <style>
    .parent2 {
      top:15px;
      left:15px;
      position:fixed;
     display:block;
      width:100px;
      height:100px;
      background-color:transparent;
      border-radius:50%;
      z-index:20;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }
    .test1 {
      width:60%;
      height:60%;
      background-color:dimGray;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
        top:25%;
      left:25%;
      z-index:19;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
        position:absolute;
    }
    .test2 {
      width:60%;
      height:60%;
      background-color:dimGray;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
        top:25%;
      left:25%;
      z-index:19;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
    }
    .test3 {
      width:60%;
      height:60%;
      background-color:dimGray;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
        top:25%;
      left:25%;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;  
    }
      .test4 {
      width:60%;
      height:60%;
      background-color:dimGray;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
      top:25%;
      left:25%;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;  
    }
    .mask2 {
      top:15px;
      left:15px;
      width:100px;
      height:100px;
      background:darkSlateGray;
      border-radius:50%;
      position:absolute;
      z-index:21;
      color:white;
      text-align:center;
      line-height:120px;
      cursor:pointer;
      position:fixed;
    }
    </style>
    <script>
    $(document).ready(function() {
     
      var active1 = false;
      var active2 = false;
      var active3 = false;
      var active4 = false;
     
        $('.parent2').on('mousedown touchstart', function() {
        
        if (!active1) $(this).find('.test1').css({'background-color': 'gray', 'transform': 'translate(0px,125px)'});
        else $(this).find('.test1').css({'background-color': 'dimGray', 'transform': 'none'});
         if (!active2) $(this).find('.test2').css({'background-color': 'gray', 'transform': 'translate(60px,105px)'});
        else $(this).find('.test2').css({'background-color': 'darkGray', 'transform': 'none'});
          if (!active3) $(this).find('.test3').css({'background-color': 'gray', 'transform': 'translate(105px,60px)'});
        else $(this).find('.test3').css({'background-color': 'silver', 'transform': 'none'});
          if (!active4) $(this).find('.test4').css({'background-color': 'gray', 'transform': 'translate(125px,0px)'});
        else $(this).find('.test4').css({'background-color': 'silver', 'transform': 'none'});
        active1 = !active1;
        active2 = !active2;
        active3 = !active3;
        active4 = !active4;
          
        });
    });
    </script>

    ***.ồn


    http://www.thuthuatweb.net/javacript/tao-menu-dong-cuc-hap-dan-voi-jquery-font-awesome-va-css3.html

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết