[Code] Thanh menu động cực hấp dẫn với jQuery, Font-Awesome và CSS3
Trang 1 trong tổng số 1 trang • Share
- SadlyTrợ giúp
- Tổng số bài gửi : 54
Điểm : 109
Danh vọng : 1
Ngày tham gia : 05/06/2015
- 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>
Similar topics
Đă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
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Wed Feb 21, 2024 11:49 am by NIK SIURI
» [PhpBB3] BeastVN
Sun Feb 11, 2024 3:07 pm by hoanglongnhatbao
» [PhpBB2] IPS Community
Sun Feb 11, 2024 3:06 pm by hoanglongnhatbao
» [PunBB] HEEDragon
Sun Feb 11, 2024 3:04 pm by hoanglongnhatbao
» [PunBB] Facebook
Sun Feb 11, 2024 3:04 pm by hoanglongnhatbao
» [PunBB] Back (Mới)
Sun Feb 11, 2024 3:03 pm by hoanglongnhatbao
» [PhpBB3] CODE GAME
Sun Feb 11, 2024 2:37 pm by hoanglongnhatbao
» [Invision] VNXF
Sun Feb 11, 2024 2:36 pm by hoanglongnhatbao
» [Simple Theme] Silver Plain V4.1
Sun Feb 11, 2024 2:19 pm by hoanglongnhatbao