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 !
October 2018
MonTueWedThuFriSatSun
1234567
891011121314
15161718192021
22232425262728
293031    

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