Sebenarnya saya ingin mengupas cara membuat berbagai menu navigasi keren dengan animasi yang dapat diterapkan ke dalam template blogger blogspot. Akan tetapi menyadari keterbatasan saya yang tidak suka menulis panjang lebar alias cepat bosan, maka saya memutuskan untuk memberikan contoh salah satu menu yang unik dan keren buat blog menggunakan CSS dan tentu saja kalian harus tahu juga fungsi dan peranan JQuerry dalam hal ini.
Mari kita mulai dari pengertian JQuerry:
jQuery adalah perpustakaan JavaScript ringan, mottonya:"tulis lebih sedikit, lakukan lebih banyak".jQuery juga menyederhanakan banyak hal rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM.
Perpustakaan jQuery berisi beberapa fitur berikut:
- Manipulasi HTML / DOM
- Manipulasi CSS
- Metode acara HTML
- Efek dan animasi
- AJAX
- Dll
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Anda bisa mengabaikannya jika di dalam template sebelumnya telah terpasang kode tersebut.
2. Langkah kedua: Tambahkan CSS
Masih di dalam halaman editor HTML blogger kembali temukan kode </head> dan tambahkan kode CSS berikut tepat di atasnya atau di bawah kode jQuerry tadi:
<style>ul { list-style: none; }
a { text-decoration: none; color: black;}
body {
font-family: 'Dosis', sans-serif;
background: pink;
}
#menu-wrapper {
overflow: hidden;
max-width: 100%;
cursor: pointer;
}
#menu-wrapper #hamburger-menu {
position: relative;
width: 25px;
height: 15px;
margin: 15px;
}
#menu-wrapper #hamburger-menu span {
opacity: 1;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
color: pink;
background-color: #555;
position: absolute;
transform: rotate(0deg);
transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {
top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
opacity: 0;
transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
transform: translateY(-9px) rotate(-135deg);
}
#menu-container .menu-list .menu-submenu {
padding-top: 20px;
padding-bottom: 20px;
}
#menu-container .menu-list {
padding-left: 0;
display: block;
position: absolute;
width: 100%;
max-width: 450px;
background: white;
box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
left: -100%;
}
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
font-size: 16px;
padding: 20px;
text-transform: uppercase;
border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
border-top: 0;
}
.accordion-toggle, .accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
}
.accordion-toggle a:before, .accordion-toggle a:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #5a5858;
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
transform: rotate(-90deg);
opacity: 1;
z-index: 2;
}
.accordion-toggle.active-tab {
background: pink;
transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
transform: rotate(0deg);
background: #fff !important;
}
.accordion-toggle a.active:after {
transform: rotate(180deg);
background: #fff !important;
opacity: 0;
}</style>
Pada bagian CSS ini saya menyarankan Anda menambahkan kode berikut dan meletakannya ke bagian atas kode ]]></b:skin>. karena kode ini saya buat untuk membentuk tampilan tombol dan form menu pencarian.
#searchbox{background:pink;border:1px solid #f0f0f0;border-radius:0px;padding:0;width:auto}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;Border-radius:0px;font:normal 16px Arial,Helvetica,Sans-serif;color:#fff;width:55%;padding:8px 15px 8px 30px}
#button-submit{background:pink;border-width:0;Border-radius:1px;padding:9px 0;width:23%;cursor:pointer;font:bold 16px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 pink}
#button-submit:hover{background:pink}
#button-submit:active{background:pink;outline:0}
#button-submit::-moz-focus-inner{border:0}
Anda bisa saja mengabaikannya, tapi nanti bagian tombol pencarian jadi jelek, lho. Soalnya saya harus menambahkannya sesuai dengan banyak inbox: "Kalau buat menu navigasi (navbar) sekalian dilengkapi menu pencarian, dong".
<div id='menu-container'>
<div id='menu-wrapper'>
<div id='hamburger-menu'><span/><span/><span/></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class='menu-list accordion'>
<div class='Search'>
<form action='/search' id='searchbox' method='get'>
<input name='q' placeholder='Ketik disini...' size='14' type='text'/>
<input id='button-submit' type='submit' value='Cari'/>
</form>
</div>
<li class='toggle accordion-toggle' id='nav1'>
<span class='icon-plus'/>
<a class='menu-link' href='#'>Menu1</a>
</li>
<!-- accordion-toggle -->
<ul class='menu-submenu accordion-content'>
<li><a class='head' href='#'>Submenu1</a></li>
<li><a class='head' href='#'>Submenu2</a></li>
<li><a class='head' href='#'>Submenu3</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li class='toggle accordion-toggle' id='nav2'>
<span class='icon-plus'/>
<a class='menu-link' href='#'>Menu2</a>
</li>
<!-- accordion-toggle -->
<ul class='menu-submenu accordion-content'>
<li><a class='head' href='#'>Submenu1</a></li>
<li><a class='head' href='#'>Submenu2</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li class='toggle accordion-toggle' id='nav3'>
<span class='icon-plus'/>
<a class='menu-link' href='#'>Menu3</a>
</li>
<!-- accordion-toggle -->
<ul class='menu-submenu accordion-content'>
<li><a class='head' href='#'>Submenu1</a></li>
<li><a class='head' href='#'>Submenu2</a></li>
<li><a class='head' href='#'>Submenu3</a></li>
<li><a class='head' href='#'>Submenu4</a></li>
</ul>
<!-- menu-submenu accordon-content-->
</ul>
<!-- menu-list accordion-->
</div>
<!-- menu-container -->
4. Langkah ke empat: Tambahkan JavaScript.
Selanjutnya cari kode </body> di dalam halaman editor HTML template blogger dan letakan kode berikut tepat di atasnya:
<script>$(function() {
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
}); // jQuery load
</script>
Selesai dan Save Template. Lihat Demo dengan mengklik tombol di bawah ini: