Tạo menu ở góc bên phải bằng CSS + CSS animation - Khôi Ròm Blog

Tạo menu ở góc bên phải bằng CSS + CSS animation

Khôi Ròm - tháng 7 10, 2018 - Blogspot, CSS, Menu, Thủ thuật blogspot
Đến hẹn lại lên, mỗi ngày mình sẽ cho ra từ 1 đến 2 bài về thủ thuật blogspot. Hôm nay mình sẽ hướng dẫn các bạn tạo menu ở góc bên phải hiện ra khi hover bằng CSS kết hợp với hiệu ứng chuyển động cực đẹp.

Cách thực hiện

Demo


Bước 1: Truy cập blogger.com > chủ đề > chỉnh sửa html > dán đoạn css này
.template-corner {
position: fixed;
color: #FFF;
width: 1000px;
text-align: center;
font-size: 14px;
z-index: 99999999;
}
.template-corner.template-top.template-right {
top: -12px;
right: -472px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.template-corner .template-title {
position: relative;
z-index: 999999999999999;
background: #01B17B;
height: 80px;
line-height: 120px;
width: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.25);
font-weight: 600;
display: block;
opacity: 0.5;
transition: 0.2s;
transition-delay: 1.2s;
}
.template-corner .template-title:hover:after {
content: '';
background: rgba(255, 255, 255, 0.1);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.template-corner .template-title .template-icon {
position: absolute;
text-align: center;
top: 35px;
left: 50%;
font-size: 26px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.template-corner .template-links {
position: relative;
top: -42px;
line-height: 40px;
width: 100%;
text-align: center;
opacity: 0;
transition: 0.2s;
transition-delay: 1s;
}
.template-corner .template-links .template-link {
display: block;
cursor: pointer;
position: absolute;
transition: all 0.2s;
transition-delay: 1s;
left: 0;
width: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.25);
background: #333;
color: #FFF;
font-weight: 600;
height: 41px;
box-sizing: border-box;
}
.template-corner .template-links .template-link:hover:after {
content: '';
background: rgba(255, 255, 255, 0.1);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.template-corner .template-links .template-link span {
opacity: 0;
transition: all 0s;
position: relative;
-webkit-transform: translateX(-275px) translate3D(0, 0, 0);
transform: translateX(-275px) translate3D(0, 0, 0);
display: inline-block;
transition: all 0.2s;
transition-delay: 0.6s;
}
.template-corner:hover .template-title {
-webkit-animation: none;
animation: none;
transition-delay: 0s;
opacity: 1;
}
.template-corner:hover .template-links {
transition-delay: 0s;
opacity: 1;
}
.template-corner:hover .template-links .template-link {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition-delay: 0s;
}
.template-corner:hover .template-links .template-link:nth-of-type(1) {
-webkit-transform: translate3D(0px, 40px, 0);
transform: translate3D(0px, 40px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(1) span {
transition-delay: 0.2s;
}
.template-corner:hover .template-links .template-link:nth-of-type(2) {
-webkit-transform: translate3D(0px, 80px, 0);
transform: translate3D(0px, 80px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(2) span {
transition-delay: 0.4s;
}
.template-corner:hover .template-links .template-link:nth-of-type(3) {
-webkit-transform: translate3D(0px, 120px, 0);
transform: translate3D(0px, 120px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(3) span {
transition-delay: 0.6s;
}
.template-corner:hover .template-links .template-link:nth-of-type(4) {
-webkit-transform: translate3D(0px, 160px, 0);
transform: translate3D(0px, 160px, 0);
}
.template-corner:hover .template-links .template-link:nth-of-type(4) span {
transition-delay: 0.8s;
}
.template-corner:hover .template-links .template-link span {
opacity: 1;
transition: 0.2s;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
Bước 2: Dán đoạn html này ngay dưới thẻ mở
<body>
<div class="template-corner template-top template-right">
<div class="template-title"><i class="template-icon fa fa-bars"></i></div>
<div class="template-links"><a class="template-link" href="https://www.facebook.com/mkhoi2001" target="_blank"><span><i class='fa fa-facebook'></i> facebook</span> </a><a class="template-link" href="https://instagram.com/mkhoi_1112" target="_blank"><span><i class="fa fa-instagram"></i> instagram</span></a><a class="template-link" href="https://codepen.io/khoiromdz"
target="_blank"><span><i class="fa fa-codepen"></i> codepen</span> </a><a class="template-link" href="https://github.com/khoiromdz" target="_blank"><span><i class="fa fa-github"></i> github</span> </a></div>
</div>
Bước 3: Chỉnh sửa, lưu lại, sau đó thì hưởng thụ kết quả.

Tổng kết

Chỉ với 3 bước nhanh gọn lẹ, chúng ta đã tạo ra menu ở góc phải rồi. Chúc các bạn thành công!