Kang Bedol – Membuat Menu Navigasi Responsive Di Blog – Berawal dari pengalaman Kang Bedol belajar nge-blog, Jadi begini awalnya setelah beberapa lama ngeblog kok ternyata Menu Navigasi yang saya pakai tidak responsive, Sedangkan ketika saya membuka blog orang lain dan coba saya bandingkan ternyata jauh berbeda dengan blog saya. Atau mungkin saya yang salah dalam memilih template blog. Dan Akhirnya saya mencoba menguji template saya di Situs Mobile-Friendly. Ternyata memang benar template yang saya gunakan tidak responsive.
Menu Navigasi Responsive atau sering sebut dengan Menu Horizontal pada blog adalah merupakan daftar tautan pada blog yang tampilannya disesuaikan dengan device atau gadget yang di pakai oleh pengguna atau sering disebut dengan Navigasi Link Halaman (Page Link). Menu ini biasanya terdapat dibawah Header blog dan sangat disarankan agar User Friendly sehingga disukai oleh mesin pencari google.
Membuat Menu Navigasi Responsive Di Blog
Berikut adalah kode Cara Membuat Menu Navigasi Responsive di Blog, Dan kode ini sudah banyak dipakai oleh blog-blog yang sudah terkenal.
Baca Juga : Cara Membuat Breadcrumb Terbaru di WordPress Tanpa Plugin
Tahap Pertama Membuat Menu Navigasi Responsive :
1. Login pada Template ==> Edit HTML
2. Cari kode kurang lebih seperti dibawah ini, Tepatnya dibagian atas Template dan dibawah kode <head>
<b:if cond=’data:blog.isMobile’>
<meta content=’width=device-width, initial-scale=1.0, user-scalable=0′ name=’viewport’/>
<b:else/>
<meta content=’width=1100′ name=’viewport’/>
</b:if>
3. Kemudian ganti dengan kode dibawah ini, Namun jika kode pada template sobat sudah seperti ini, Maka tidak perlu untuk menggantinya.
<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/>
<meta content=’text/html; charset=UTF-8′ http-equiv=’Content-Type’/>
4. Selanjutnya cari kode ]]</b:skin> di template sobat copy dan paste kode dibawah ini tepat di atasnya.
/*—–Responsive Menu —-*/
body {margin: 0px;}
#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #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: #5FC6EB;}
#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: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;
text-shadow: none;border-bottom: 1px dashed #31AFDB;}#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB;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}
}
Untuk penyesuaian atau customization sobat bisa merubah kode-kode :
- #50B7DC untuk mengganti warna menu background
- #5FC6EB untuk mengganti warna background hover
- Sobat bisa melihat Daftar Kode Warna HTML
5. Untuk Selanjutnya cari kode <body> di template sobat, kemudian copy dan paste kode dibawah ini tepat dibawahnya.
<nav id=’menu’>
<input type=’checkbox’/>
<label>≡<span>Navigasi Menu</span></label>
<ul>
<li><a href=’/’>Home</a></li>
<li><a href=’#’>About</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>
<li><a href=’#’>Tab 4</a></li>
<li><a href=’#’>Tab 5</a></li>
<li><a href=’#’>Tab 6</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>
Ganti kode pagar (#) dengan Menu Link yang sobat punya.
6. Simpan template sobat dan lihat hasilnya.
Sedangkan bagi sobat yang ingin membuat menu navigasi responsive berserta dengan menu pencarian (menu Search), Seperti yang kang bedol gunakan, Sobat bisa menggunakan kode dibawah ini. Untuk cara pemasangannya ikuti langkah-langkah di atas.
Ganti kode nomor 4 dengan kode dibawah ini:
/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:” “;display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2 > li > ul:before{content:””;width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .parent:after{content:”f107″;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form input#search-box[type=”text”]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
#search-form input#search-button[type=”submit”]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type=”submit”]:hover{background:#222222;cursor:pointer}
#search-form input#search-box[type=”text”]:focus{background:#eee;outline:none}
Ganti kode nomor 5 dengan kode dibawah ini:
<nav id=’nav’>
<a class=’toggleMenu’ href=’#’><i class=’fa fa-th-list’></i> Menu</a>
<!– secondary navigation menu start –>
<ul class=’nav nav-menu2′>
<li><a class=’active’ href=’#’><i class=’fa fa-home’></i> Home</a></li>
<li><a href=’#’>Menu 1</a>
<ul>
<li><a href=’#’>Sub Menu 1</a></li>
<li><a href=’#’>Sub Menu 2</a></li>
<li><a href=’#’>Sub Menu 3</a></li>
</ul>
</li>
<li><a href=’#’>Menu 2</a>
<ul>
<li><a href=’#’>Sub Menu 1</a>
</li>
<li><a href=’#’>Sub Menu 2</a></li>
<li><a href=’#’>Sub Menu 3</a></li>
</ul>
</li>
<li><a href=’#’>Menu 3</a></li>
<li><a href=’#’>Markup</a></li>
<li><a href=’#’>Error Page</a></li>
<li><a href=’/p/lorem-ipsum-dolor-sit-amet-consectetur.html’>Static Page</a></li>
</ul>
<!– secondary navigation menu end –>
<form action=’/search’ id=’search-form’ method=’get’ style=’display: inline;’><table><tbody><tr><td class=’search-box’><input id=’search-box’ name=’q’ onblur=’if(this.value=='')this.value=this.defaultValue;’ onfocus=’if(this.value==this.defaultValue)this.value='';’ type=’text’ value=’Search…’ vinput=”/></td>
<td class=’search-button’><input id=’search-button’ type=’submit’ value=’’/></td></tr></tbody></table></form>
</nav>
Selanjutnya Cari kode </head> copy dan paste kode dibawah ini tepat diatasnya, Namun jika di template sobat sudah ada kode seperti dibawah ini, Abaikan saja kode ini.
<link href=’//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/>
Kemudian cari kode </body> setelah itu copy dan paste kode dibawah ini tepat diatasnya
<script type=’text/javascript’>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(“.nav li a”).each(function(){if($(this).next().length>0){$(this).addClass(“parent”)}});$(“.toggleMenu”).click(function(e){e.preventDefault();$(this).toggleClass(“active”);$(“.nav”).toggle()});adjustMenu()})
;$(window).bind(“resize orientationchange”,function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(“.toggleMenu”).css(“display”,”inline-block”);if(!$(“.toggleMenu”).hasClass(“active”)){$(“.nav”).hide()}else{$(“.nav”).show()}$(“.nav li”).unbind(“mouseenter mouseleave”);$(“.nav li a.parent”).unbind(“click”).bind(“click”,function(e){e.preventDefault();$(this).parent(“li”).toggleClass(“hover”)})}else if(ww>=768){$(“.toggleMenu”).css(“display”,”none”);$(“.nav”).show();$(“.nav li”).removeClass(“hover”);$(“.nav li a”).unbind(“click”);$(“.nav li”).unbind(“mouseenter mouseleave”).bind(“mouseenter mouseleave”,function(){$(this).toggleClass(“hover”)})}}
//]]></script><script src=’https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js’></script>
- Jangan lupa untuk menyimpan template.
Artikel Terkait : Cara Menampilkan Gambar Thumbnail Hanya di Halaman Depan
Demikianlah cara membuat menu navigasi responsive diblog, Dengan sedikit perubahan maka menu navigasi yang sobat punya diblog sobat akan menjadi responsive.
Thanks, I ave recently been looking for info about this subject for a while and yours is the greatest I ave found out so far.