Announcements
Vì một cộng đồng Forumvi phát triển !
June 2018
MonTueWedThuFriSatSun
    123
45678910
11121314151617
18192021222324
252627282930 

Calendar Calendar

Poll
Ads

    No ads available.


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

    Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

    avatar
    Sadly
    Trợ giúp
    Tổng số bài gửi : 54
    Điểm : 108
    Ngày tham gia : 05/06/2015
    Xem lý lịch thành viên

    Bài gửiSadly on Tue Mar 14, 2017 12:55 pm

    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>

    Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

    Đăng ký thành viên và bình luận

    Bạn cần phải đăng ký để bình luận.

    Tạo tài khoản

    Tham gia vào cộng đồng bằng cách tạo tại khoản, nó thật dễ dàng!


    Tạo tài khoản mới

    Đăng nhập

    Đã có tài khoản? Không thành vấn đề, hãy đăng nhập.


    Đăng nhập

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