5/11/19

Tạo Menu Cố Định Cho Blogspot Có Hiệu Ứng Tuyệt Đẹp

Mặc định các nhãn của Blogspot được hiển thị rất đơn điệu, nếu bạn muốn các nhãn hiển thị được đẹp hơn, bạn có thể tạo menu dọc cho nó, một phần để giúp các bạn đọc truy cập thông tin nhanh bài viết mới phổ biến trên Blog, vừa để tăng thêm tính chuyên nghiệp cho trang Blog của bạn.

Hôm nay DESBLOG sẽ giới thiệu cho các bạn Menu do mình Edit lại.


Demo hình ảnh cho các bạn ! Các bạn có thể test trực tiếp trên Blog mình nhé !
Để tạo Menu dạng này cần phải có HTML, CSS, và một chút Javacript.

Liệt kê Menu Item


<div class='page'>
<span class='menu_toggle'>
<i class='menu_open fa fa-bars fa-lg'></i>
<i class='menu_close fa fa-times fa-lg'></i>
</span>
<ul class='menu_items'>
<li><a href='#'><i class='icon fa fa-home fa-2x'></i> Home</a></li>
<li><a href='#'><i class='icon fas fa-info-circle fa-2x'></i> About</a></li>
<li><a href='#'><i class='icon fa fa-phone fa-2x'></i> Contact</a></li>
</ul>
{ Phần Code Body + Footer của Template } </div>


Giải thích một chút: { Phần Code Body + Footer của Template } - Để chút mình Viết CSS cho nó NGHIÊNG( Khó diễn tả quá >.<)
Bạn có thể ViewSource từ Blog mình ra có thể thấy mình đặt hết phần Code Body và Footer của mình trong thẻ Content

Viết CSS cho Menu

/* Menu Ben */
.menu_toggle {
z-index: 900;
position: fixed;
top: 0;
left: 0;
display: block;
cursor: pointer;
width: 100px;
height: 80px;
background-color: #fa5b2b;
border-bottom-right-radius: 100%;
}
.menu_toggle .menu_open, .menu_toggle .menu_close {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -12px;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_toggle .menu_open {
transform-origin: -100px -100px;
}
.menu_toggle .menu_close {
transform: rotate(20deg);
transform-origin: -100px -160px;
}
.menu_items {
position: fixed;
bottom: 0;
left: 50px;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu_items li {
height: 60px;
margin-bottom: 30px;
transform: translateX(-300px);
transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_items li:nth-child(2) {
margin-left: 40px;
}
.menu_items li:nth-child(3) {
margin-left: 80px;
}
.menu_items a {
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #fa5b2b;
transition: color 0.2s;
font-weight:bold;
}
.menu_items a .icon {
position: relative;
display: inline-block;
margin-right: 25px;
color: #fa5b2b;
}
.menu_items a .icon:after {
position: absolute;
top: 50%;
left: 50%;
content: '';
display: block;
width: 60px;
height: 60px;
margin-left: -33px;
margin-top: -32px;
border-radius: 100%;
border: 2px solid #fa5b2b;
transition: border-color 0.2s;
}
.menu_items a:hover {
color: #f0f0f0;
}
.menu_items a:hover .icon:after {
border-color: #f37272;
}
.menu_toggle i {
color: #f0f0f0;
}

Thêm một chút Javascript để cho Menu hoạt động

<script type='text/javascript'>
      // elements
var $page = $('.page');
$('.menu_toggle').on('click', function(){
  $page.toggleClass('menu-fixed');
});
$('.content').on('click', function(){
  $page.removeClass('menu-fixed');
}); 
</script>

Viết CSS khi Menu kích hoạt

/* Mo Menu */
.content{    transform-origin: top left;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu-fixed .content {
transform: rotate(-30deg);    z-index: -1;
position: relative;    filter: blur(3px);
}
.menu-fixed .menu_open {
transform: rotate(-20deg);
}
.menu-fixed .menu_close {
transform: rotate(0);
}
.menu-fixed .menu_items li {
transform: translateX(0);
transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.menu-fixed .menu_items li:nth-child(2) {
transition-delay: 0.47s;
}
.menu-fixed .menu_items li:nth-child(3) {
transition-delay: 0.48s;
}
.menu_items a:active .icon {
color: #f37272;
}
.menu_toggle:active i {
opacity: 0.8;
}

Mình viết bài Tách phần ra cho các bạn dễ hiểu ! Còn bạn nào Broo hơn thì có thể Viewsource chắc dễ hơn !!!
Góp ý cho mình để mình khắc phục nhé! Chúc các bạn thành công !