Cara Membuat Menu Dropdown Blogger yang Responsive
Tak
bisa dimungkiri bahwa navigasi blog cukup berpengaruh saat Anda mengajukan blog
untuk menjadi publisher Google AdSense. Tujuannya tentu agar memudahkan
pengunjung untuk menelusuri blog Anda. Nah, salah satu tipe navigasi terfavorit
adalah menu dropdown Blogger yang responsive.
Tipe
atau bentuk navigasi blog sebenarnya ada berbagai macam. Ada blog yang
menggunakan menu vertikal di sebelah kiri halaman, ada pula menu yang
diletakkan secara horizontal di header atau bagian atas halaman. Tetapi kebanyakan
pengelola blog
lebih menyukai tipe menu navigasi yang horizontal dan memiliki submenu atau
dropdown.
Menu
dropdown ini dinilai lebih jelas dan mudah dipahami oleh pengunjung blog, ditambah
lagi menu tersebut responsive. Jika demikian, sepertinya tidak ada alasan lagi untuk
terkena penolakan AdSense karena masalah “Navigasi Situs Sulit”. Bagaimana cara
membuatnya? Berikut penjelasan selengkapnya.
Membuat Menu Navigasi Dropdown
Multilevel Responsive
Oke,
pada penjelasan cara membuat menu dropdown blogger yang responsive ini kita
akan gunakan jenis font awesome, sehingga akan muncul ikon di samping teks. Caranya
tambahkan kode di bawah ini sebelum kode <b:skin>.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Tetapi
jika tidak ingin ada ikon di sebelah teks, maka tidak perlu tambahkan kode
tersebut. Oke, mari kita mulai langkah-langkahnya.
#1.
Sebelum dimulai, sebaiknya Anda backup terlebih dahulu template blog Anda untuk
berjaga-jaga. Sebab, Anda harus menghapus kode CSS menu navigasi bawaan blog
Anda. Ini bertujuan supaya tampilan menu tidak berantakan karena bentrok antara
kode CSS lama dan CSS baru.
Kode
menu dropdown ini dikembangkan oleh blog caramanual.com.
Untuk demo menunya bisa Anda lihat di sini.
#2.
Buka dasbor blog Anda > masuk ke menu “Tema” > klik “Edit HTML”. Cari
kode ]]></b:skin> atau </style> lalu tambahkan CSS di bawah ini
tepat di atasnya.
nav
{
display: block;
background: #374147;
}
.menu
{
display: block;
}
.menu
li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu
li:first-child {
margin-left: 0;
}
.menu
li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu
li a:hover,.menu li:hover>a {
color: #fff;
background: #ff3c41;
}
.menu
ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu
ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu
ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu
ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu
ul li a:hover,.menu ul li:hover>a {
background: #ff3c41;
color: #fff;
}
.menu
li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu
ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu
ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu
li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu
{
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover
{
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer
{
background: #ff3c41;
}
@media
(min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media
(max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
margin-top: 100px;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #ff3c41;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media
(max-width: 480px) {
}
@media
(max-width: 320px) {
}
#3.
Langkah berikutnya salin dan tempel kode HTML menu navigasi responsive ini.
Untuk letaknya bisa Anda sesuaikan dengan template blog Anda, tetapi biasanya
ditempatkan sebelum kode </header>.
<nav>
<a
id="resp-menu" class="responsive-menu"
href="#"><i class="fa fa-reorder"></i>
Menu</a>
<ul class="menu">
<li><a class="homer"
href="#"><i class="fa fa-home"></i>
HOME</a>
<ul class="sub-menu">
<li><a
href="#">Sub-Menu 1</a></li>
<li><a
href="#">Sub-Menu 2</a></li>
<li><a
href="#">Sub-Menu 3</a></li>
<li><a
href="#">Sub-Menu 4</a></li>
<li><a
href="#">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#"><i class="fa
fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa
fa-camera"></i> PORTFOLIO</a>
<ul class="sub-menu">
<li><a
href="#">Sub-Menu 1</a></li>
<li><a
href="#">Sub-Menu 2</a>
<ul>
<li><a href="#">Sub
Sub-Menu 1</a></li>
<li><a href="#">Sub
Sub-Menu 2</a></li>
<li><a href="#">Sub
Sub-Menu 3</a></li>
<li><a href="#">Sub
Sub-Menu 4</a></li>
<li><a href="#">Sub
Sub-Menu 5</a></li>
</ul>
</li>
<li><a
href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub
Sub-Menu 1</a></li>
<li><a href="#">Sub
Sub-Menu 2</a></li>
<li><a href="#">Sub
Sub-Menu 3</a></li>
<li><a href="#">Sub
Sub-Menu 4</a></li>
<li><a href="#">Sub
Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa
fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa
fa-tags"></i> CATEGORIES</a>
<ul class="sub-menu">
<li><a
href="#">Sub-Menu 1</a></li>
<li><a
href="#">Sub-Menu 2</a>
<ul>
<li><a href="#">Sub
Sub-Menu 1</a></li>
<li><a href="#">Sub
Sub-Menu 2</a></li>
<li><a href="#">Sub
Sub-Menu 3</a></li>
<li><a href="#">Sub
Sub-Menu 4</a></li>
<li><a href="#">Sub
Sub-Menu 5</a></li>
</ul>
</li>
<li><a
href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub
Sub-Menu 1</a></li>
<li><a href="#">Sub
Sub-Menu 2</a></li>
<li><a href="#">Sub
Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu
4</a></li>
<li><a href="#">Sub
Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa
fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa
fa-sitemap"></i> SITEMAP</a></li>
<li><a href="#"><i class="fa
fa-exclamation-triangle"></i> DISCLAIMER</a></li>
</ul>
</nav>
#4.
Cari lagi kode </body> kemudian tambahkan kode jQuery berikut ini di atas
kode </body>.
<script
type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var touch
= $('#resp-menu');
var menu
= $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden'))
{
menu.removeAttr('style');
}
});
});
//]]>
</script>
#5.
Terakhir, simpan template lalu lihat hasilnya.
Jika
menu navigasi Anda jadi terlihat berantakan, coba perhatikan lagi langkah nomor
#1, kemudian coba lagi dari awal sampai berhasil.
Demikian
tutorial cara membuat menu dropdown Blogger yang responsive. Semoga bermanfaat.
