Cara Tuntas-Jelas Membuat Menu Responsif (1)

Seperti pembagian peserta dalam kursus bahasa Inggris terdiri dari tingkat dasar atau pemula (elementary), menengah (intermediate), dan maju (advance), saya merasa di tingkat menengah ketika belajar dan ingin menerapkan Cara Tuntas Membuat Menu Responsif di blog ini. Tetapi terus terang dalam hampir seminggu nonstop saya “berburu” info tentang hal tersebut, hasilnya nihil. Cukup kesal dan frustasi juga ketika
berbagai info yang saya buka dan dicoba, ternyata semua gagal. Yang saya rasakan, hampir semua info yang saya buka tidak tuntas dan jelas dari A sampai Z ketika membahas sebuah topik. Saya piker mungkin ada masalah di struktur blog, tetapi kenyataan pada akhirnya saya menemukan solusinya, setelah dengan kreasi dan usaha sendir saya mengkombinasikan berbagai info tersebut.
Dari pengalaman pribadi tersebut menggerakkan hati dan mendorong niat say untuk berbagi info tentang Cara Tuntas Membuat Menu Responsif. Tentu saja terutama bagi para sobat yang sedang mengalami dan menghadapi problem seperti yang pernah saya alami. Tentang apa manfaat dan keunggulan dan menu responsive tersebut, kiranya tak perlu dibahas. Karena saya yakin para sobat telah mengetahuinya.
Mari langsung saja praktik:
1. Login  Blog
2.  Klik Tema di Dashboard
3.  Klik HTML
4.  Arahkan kursos dan klik di kotak HTML
5.  Tekan Ctrl sambil klik keyboard huruf "F"
6.  Cari kode [[><b;skin ketik di kotak yang muncul di sudut kanan atas, lalu Enter
7.  Copy paste kode berikut di bawah ini persis di atas kode tersebut

#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}
}

8. Cari kode </head> dengan mengikuti langkah seperti no 5 dan 6

9. Copy paste kode di bawah ini persis di atas kode tersebut

<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>

10. Lanjut cari kode </body> seperti  langkah 5 dan 6
11. Copy paste kode di bawah ini persis di atas kode tersebut

<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>

12. Terakhir cari kode <header> seperti langkah 5 dan 6
13. Copy paste kode di bawah ini di bawah kode tersebut

<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>

Selanjutnya simak keterangan selengkapnya di sini.

Simak Juga: