[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
Join date : 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