Cara Membuat Menu Responsive Praktis di Blogger

18 Sep 2015 - - 1

Template Responsive untuk blogger saat ini banyak sekali tersedia di internet, anda bisa mendapatkanya secara cuma-cuma alias gratis, anda download, dan pasang di blog anda dengan mudah dan cepat. Beberapa template blog responsive yang tersedia di internet ada yang sudah menggunakan menu responsive lengkap dengan menu dropdown, namun banyak juga yang hanya menggunakan menu utama saja, tidak tersedia fitur menu drop down pada template responsive gratis tersebut.


Lain halnya dengan template responsive blogger yang versi premium, atau anda harus membeli kepada pembuat template blog responsive tersebut, menu-menu yang tersedia sudah support menu drop down, dan pengelolaan template responsive jenis premium ini tentunya semakin mudah, karena tiada lain ingin memanjakan anda sebagai pembeli template blog.

Pada kesempatan kali ini, akan saya bagikan tutorial Cara Membuat Menu Responsive Praktis di blogger, lengkap dengan menu dropdown, dengan tampilan seperti berikut:
Untuk tempilan menu saat blog dibuka menggunakan laptop seperti pada gambar berikut:


Sedangkan untuk tampilan menu saat blog dibuka menggunakan hp tampilan sebagai berikut:

Cara membuatnya, anda cukup menambahkan gadget HTML/ JavaScript dibawah header blog anda, kemudian copy paste kode berikut:

<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>MENU</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Bisnis Online <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Blog</a></li>
<li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Web</a></li>

</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>

<style>
/*-----Start Responsive Drop Down Menu by MBT redesign by MungBisnis.com ----*/
body {
margin: 0px;
}
#menu{
background: #333333;
color: #FFF;
height: 40px;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5c5b5b;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #333333;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 0.9em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #333333;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5c5b5b;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}

}
/*-----End Responsive Drop Down Menu by MBT redesign by MungBisnis.com ----*/
</style>

Perhatikan gambar berikut:

Kode diatas sudah berisi menu2 yang bisa anda edit langsung saat memasukan di gadget HTML/JavaScript, untuk mengatur warna agar sesuai dengan warna blog anda, silahkan anda ganti saja kode warna berikut:

• Kode warna background menu utama: #333333 Klik DISINI untuk mencari kode warna yang lain.
• Kode warna background sub menu: #5c5b5b

.