Menu ini saya dapat dari Blog Twisted Shape, Admin aslinya adalah Arlina Fitriyani dengan blognya yang keren yaitu Arlina Design.
Jika sobat ingin Memasang Menu Simple dan keren ini, silahkan ikuti tutorial di bawah ini.
Pertama sobat masuk ke Blogger > Template > Edit HTML
Masukan CSS dibawah ini tepat diatas atau
/* 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;
}
Lalu Masukan dibawah ini di tempat yang sobat inginkan.
<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>
Lalu Masukan dibawah ini tepat diatas
<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>
Langkah Terakhir Simpan Template.Semoga Tutorial Ini Bermanfaat...
0 komentar:
Posting Komentar