Hướng dẫn tạo Menu cố định ẩn hiện cho blogspot
Menu là một thanh điều hướng không thể thiếu cho một website/blog, hôm nay mình sẽ hướng dẫn các bạn cách tạo Menu cố định ẩn hiện cho blogspot, menu này rất tiện và nhỏ gọn, khi hiển thị trên máy tính hoặc điện thoại sẽ không tốn về không gian cũng như thẩm mỹ 😝
Hướng dẫn cách làm:
Bước 1: Bạn đăng nhập Blogspot -> Chủ đề -> Chỉnh sửa -> Nhấn Ctrl + F và tìm kiếm ]]></b:skin sau đó dán đoạn CSS sau lên trên/* CSS Simple Menu */
.unstyled-list {
padding: 0;
}
.unstyled-list li {
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu {
position: absolute;
right: 0;
top: 0;
min-width: 140px;
opacity: 0;
backface-visibility: hidden;
transform: translate3d(0,20px,0);
visibility: hidden;
box-shadow: 0 3px 8px -3px rgba(0,0,0,0.2);
transition: all .2s ease, visibility 0s linear;
}
.nav {
position: fixed;
top: 5%;
right: 2%;
z-index: 102;
}
.nav.active .fa-bars {
opacity: 0;
}
.nav.active .fa-times {
opacity: 1;
color: #fff;
background: #f56954;
}
.nav.active .nav-menu {
opacity: 1;
transform: translate3d(0,50px,0);
visibility: visible;
transition-delay: 0s;
}
.menu-btn {
display: block;
width: 40px;
height: 40px;
color: #fff;
background-color: rgba(0,0,0,0.2);
transition: all .2s ease;
text-align: center;
position: relative;
z-index: 1;
}
.menu-btn .fa {
position: absolute;
top: 0;
right: 0;
font-size: 24px;
line-height: 40px;
width: 40px;
vertical-align: middle;
transition: opacity .1s linear;
}
.menu-btn .fa-bars {
opacity: 1;
color: #fff;
}
.menu-btn .fa-times {
opacity: 0;
}
.menu-btn:hover {
background-color: #f56954;
color: #fff;
}
.nav-item-link {
display: block;
font-size: 13px;
color: #999;
padding: 15px;
background-color: #fff;
transition: all .2s ease;
border-bottom: 1px solid #e9e9e9;
}
.nav-item:last-child .nav-item-link {
border-bottom: none;
}
.nav-item .nav-item-link i.fa.fa-home,.nav-item .nav-item-link i.fa.fa-paper-plane,.nav-item .nav-item-link i.fa.fa-list-alt,.nav-item .nav-item-link i.fa.fa-coffee {
margin-right: 10px;
}
.nav-item-link:hover {
background-color: #fcfcfc;
}
a.nav-item-link:hover {
color: #1497ec;
}
.unstyled-list:before {
bottom: 100%;
right: 10%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255,255,255,0);
border-bottom-color: #f56954;
border-width: 8px;
margin-left: -8px;
}
.nav-item:first-child .nav-item-link {
border-top: 3px solid #f56954;
}
a.nav-item-link {
text-decoration: none;
font-family: inherit;
} Bước 2: Bạn dán đoạn HTML sau vào chỗ cần hiển thị hoặc dán dưới thẻ <body><nav class='nav' data-menu>
<a class='menu-btn' href='#'>
<i class='fa fa-bars'></i>
<i class='fa fa-times'></i>
</a>
<ul class='unstyled-list nav-menu'>
<li class='nav-item'>
<a class='nav-item-link' href='#'>About</a>
</li>
<li class='nav-item'>
<a class='nav-item-link' href='#'>Articles</a>
</li>
<li class='nav-item'>
<a class='nav-item-link' href='#'>Work</a>
</li>
<li class='nav-item'>
<a class='nav-item-link' href='#'>Contact</a>
</li>
</ul>
</nav> Bước 3: Để menu này hoạt động bạn sử dụng javascript sau và dán nó trên thẻ </body> <script type="text/javascript">
(function() {
window.Menu = (function() {
Menu.init = function() {
return $('[data-menu]').each(function(idx, el) {
return new Menu($(el));
});
};
function Menu($el) {
this.nav = $el;
this.menubtn = $('.menu-btn', this.nav);
this.menubtn.on('click', (function(_this) {
return function(ev) {
_this.nav.toggleClass('active');
return false;
};
})(this));
}
return Menu;
})();
$(function() {
if ($('[data-menu]').length) {
return Menu.init();
}
});
}).call(this);
</script> Lưu mẫu lại và chỉnh sửa!Hy vọng với thủ thuật nhỏ này sẽ giúp ích bạn trong quá trình sử dụng blogspot hoặc thiết kế.
Hướng dẫn tạo Menu cố định ẩn hiện cho blogspot
Reviewed by Cuong Nguyen
on
March 29, 2017
Rating:
Reviewed by Cuong Nguyen
on
March 29, 2017
Rating:
No comments: