Iris Tips
Iris TipsFixed Tiny Nav for Blogger
Tạo Tiny Menu hiệu ứng ẩn hiện cho Blogger/Blogspot
Bước 1: Chèn đoạn CSS sau trước thẻ ]]></b:skin> /* CSS Simple Menu by Iris-Tips.blogspot.com*/
.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: Chèn đoạn jQuery sau trước thẻ </body>
<script>
(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> Bước 3: Chèn đoạn code sau sau 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='#'>Sitemap</a>
</li>
<li class='nav-item'>
<a class='nav-item-link' href='#'>Contact</a>
</li>
<li class='nav-item'>
<a class='nav-item-link' href='#'>Forum</a>
</li>
</ul>
</nav> Chúc bạn thành công!
Created by Arlina/Iris Tips
Mẹo nhỏ khi bình luận