Apr 6, 2017

Membuat Menu Responsive With CSS And JavaScript

responsive menu

Postingan ini adalah lanjutan dari postingan yang lalu Membuat Recent Post Widget Responsive Berwarna dimana sudah kita bahas dan praktekkan di postingan lanjutan ini akan dibahas lanjut mengenai salah satu menu Navigasi pada blog. Seperti yang sudah kita ketahui bersama penempatan Navigasi Blog sangat penting bagi Blog agar dengan mudah di rayapi oleh mesin pencari seperti Google, apalagi Google sekarang ini terus memperbaharui Logika script mereka yang tujuannya adalah agar pengguna internet dapat nyaman dan mudah dalam mengakses informasi yang disediakan.

Penerapan Menu Navigasi pada blog sangat berpengaruh juga terhadap SEO dan pastinya berhubungan langsung juga dengan mesin pencari, jika di dalam blog atau website SEO nya kuat meskipun banyak artikel yang sejenis tetap saja Blog tersebut masih di Urutan halaman depan di pencarian Google. Nah teerkait hal tersebut di postingan ini akan di bahas lebih lanjut Tools Menu navigasi yaitu Bagaimana Membuat Menu Responsive With CSS And JavaScript.  

Tampilan pada blog dipengaruhi dengan penerapan kode script yang tertanam pada template blog, banyak blog yang agak kurang memperhatikan mobile friendly bagi blog-nya hal itu juga akan mempengaruhi trafik pengunjung karena selain tampilannya tidak responsive juga biasanya loading blog terlalu lama sehingga sepi pengunjung. Di Menu Responsive ini ditambahkan kode CSS dan Javascript agar saat di tampilkan responsive dan bisa menyesuaikan dengan media yang ditampilkan.

Bagi sobat yang ingin mencobanya silahkan simak langkah-langkah berikut ini.

Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau </style>

#menu,#menu input,#menu ul{height:50px}
#menu a.trigger2::after,#menu a.trigger2:hover::after{border-width:5px 6px;top:20px;width:0;height:0;border-style:solid}
#menu a.prett::after,#menu a.trigger2::after,#menu a.trigger2:hover::after{content:""}
#menu-wrapper{height:50px;width:100%;position:relative}
#menu{background:#666;color:#eee;font-family:Roboto,sans-serif}
#menu li,#menu ul{margin:0;padding:0;list-style:none}
#menu li{float:left;display:inline;position:relative}
#menu li a{font-size:16px;font-weight:700;color:#eee;text-transform:uppercase}
#menu a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#eee}
#menu li a:hover,#menu li:hover>a{color:#111}
#menu input{display:none;margin:0;padding:0;width:80px;opacity:0;cursor:pointer}
#menu label{font-size:30px;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px;text-transform:none}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#ddd;position:absolute;z-index:99;display:none;color:#555;text-transform:none}
#menu a.prett:hover,#menu li:hover>a.prett,#menu ul.menus a:hover{color:#fff;background:#bbb}
#menu ul.menus a{color:#555;line-height:30px!important;font-size:14px;padding:0 20px;font-weight:300;text-transform:none}
#menu ul.menus li{display:block;width:100%;text-transform:none}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 20px}
#menu a.prett::after{width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent;position:absolute;top:23px;right:9px}
#menu a.trigger2::after{border-color:transparent transparent transparent #eee;position:absolute;right:9px}
#menu a.trigger2:hover::after{border-color:transparent transparent transparent #333;position:absolute;right:9px}

@media screen and (max-width: 770px){
#menu ul.menus,.main-wrapper{width:100%;border:none}
.outer-wrapper{padding:0}
#sidebar-wrapper,.sidebar1-wrapper,.sidebar2-wrapper,.sidebar3-wrapper{width:100%;text-align:center;margin:0 auto}
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{position:static}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu a.prett:hover,#menu li:hover,#menu li:hover>a.prett{background:#BABABA;color:#333}
#menu ul.menus a{background:#BABABA}
#menu ul.menus a:hover{background:#ddd;color:#333}
#menu input,#menu label{position:absolute;top:0;left:15px;display:block}
#menu input{z-index:4}
#menu input:checked+label{color:#fff}
}


Langkah Ke-2
Setelah langkah menambahkan kode CSS diatas lanjut silahkan salin kembali kodeJavascript ini lalu letakkan sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/css?family=Roboto:300,700");
//]]>
</script>


Langkah Ke-Tiga
Silahkan salin kode Javascript dibawah ini lalu letakkan sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
function switchid(d){hideallids(),showdiv(d)}function hideallids(){for(var d=0;d<ids.length;d++)hidediv(ids[d])}function hidediv(d){document.getElementById?document.getElementById(d).style.display="none":document.layers?document.id.display="none":document.all.id.style.display="none"}function showdiv(d){document.getElementById?document.getElementById(d).style.display="block":document.layers?document.id.display="block":document.all.id.style.display="block"}var ids=new Array("a1","a2");
var boxArray=["a1","a2"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray.length;r++){var o=document.getElementById(boxArray[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});
var button=document.querySelector("#nav-icon");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"});
//]]>
</script>


Langkah Terakhir ke-4
Silahkan sobat salin kembali kode HTML ini dan letakkan bebas dimana sobat mau ditampilkan nantinya biasanya di bawah Header

<div id='menu-wrapper'>
            <nav id='menu'>
<input data-target='#nav-ul' id='nav-icon' type='checkbox'/>
<label><i class='fa fa-bars'></i><span>Navigation</span></label>
<ul id='nav-ul'>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='prett' href='javascript:switchid(&apos;a1&apos;);' title='Drop Menu'>Drop Menu</a>
<ul class='menus' id='a1'>
<li><a href='#' title='Drop Menu1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a class='prett' href='javascript:switchid(&apos;a2&apos;);' title='Drop Menu1'>Drop Menu 1</a>
<ul class='menus' id='a2'>
<li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
  </div>

Dan hasilnya seperti Demo tampilan di bawah ini 



Nah sampai sini sudah selesai namun jika sobat mau menambahkan submenu lainnya sobat bisa tambahkan sendiri  ul dengan id berbeda misal a2, a3 dan seterusnya setiap ada penambahan submenu seperti tampilan kode berikut ini 

<li><a class='prett' href='javascript:switchid(&apos;a3&apos;);' title='Drop Menu1'>Drop Menu 1</a>
<ul class='menus' id='a3'>
<li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li>
</ul>
</li>

Dan Selesai, Selamat Mencoba jika ada yang ingin di tanyakan bisa melalui kolom komentar dibawah ini semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.