Social Media Sharing Button UI Design 2 - Floating Social Media Icons Using HTML CSS And Javascript
Hôm nay mình giới thiệu cho các bạn 1 giao diện Floating Social Media Icons đơn giản, thướng áp dụng cho các thanh điều hướng hay social menu bằng CSS3.
<div id="social-container">
<div id="toggle"></div>
<ul id="social-content">
<li>
<a href=""><i class="demo-icon ecs-facebook"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-messenger"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-twitter"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-gplus"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-youtube-play"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-instagram"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-tumblr"></i></a>
</li>
<li>
<a href=""><i class="demo-icon ecs-pinterest"></i></a>
</li>
</ul>
</div>
#social-container {
width: 50px;
height: 50px;
position: relative;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
#toggle {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: #e91e63;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
overflow: hidden;
border-radius: 10px;
z-index: 1;
cursor: pointer;
&:before {
content: "\f1e0";
font-family: "ecs";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #fff;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&.active:before {
content: "\e808";
}
}
#social-content {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
li {
border-radius: 10px;
list-style: none;
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
background-color: #fff;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
overflow: hidden;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
text-align: center;
a {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
line-height: 50px;
font-size: 20px;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
display: block;
width: 100%;
height: 100%;
}
&:hover {
background: #2196f3;
a {
color: #fff;
}
}
}
&.active {
li {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
&:nth-child(1) {
top:-100%;
left: -100%;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
&:nth-child(2) {
top:-100%;
left: 0%;
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
&:nth-child(3) {
top:-100%;
left: 100%;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
&:nth-child(4) {
top:0%;
left: 100%;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
&:nth-child(5) {
top:100%;
left: 100%;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
&:nth-child(6) {
top:100%;
left: 0%;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
&:nth-child(7) {
top:100%;
left: -100%;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
&:nth-child(8) {
top:0%;
left: -100%;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
}
}
}
}
$(document).ready(function() {
$("#toggle").click(function(event) {
$("#toggle").toggleClass('active');
$("#social-content").toggleClass('active');
});
});
0 thảo luận về Social Media Sharing Button UI Design 2 - Floating Social Media Icons Using HTML CSS And Javascript
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.
