Thông báo

QUAN TRỌNG

Tuyên bố từ chối trách nhiệm !!!
Chúng tôi không chịu trách nhiệm về bài đăng của các thành viên, nếu bạn có vấn đề gì vui lòng liên hệ với các quan chức địa phương nơi bạn ở, chúng tôi sẽ không giải quyết bất cứ vấn đề gì khi bạn sử dụng forum.

Vì một cộng đồng Forumvi phát triển !
December 2018
MonTueWedThuFriSatSun
     12
3456789
10111213141516
17181920212223
24252627282930
31      

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
    Danh vọng : 0
    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